Iframe has zero height inside parent with no height and bottom padding - HTML CSS CSS Property

HTML CSS examples for CSS Property:padding

  1. HOME
  2. HTML CSS
  3. CSS Property
  4. padding

Description

Iframe has zero height inside parent with no height and bottom padding

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--from  w ww .  j a  va  2 s  .  c o  m-->
   margin:0;
   padding:0;
   border:0;
}

body {
   height:100%;
   width:100%;
}

.wrapper {
   position:relative;
   height:0;
   width:100%;
   padding-bottom:57.26%;
}

.frame {
   position:absolute;
   top:0;
   right:0;
   left:0;
   bottom:0;
   width:100%;
   height:100%;
}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <iframe border="0" scrolling="no" class="frame" src="https://www.java2s.com/style/demo/Firefox.png"></iframe> 
  </div>  
 </body>
</html>

Related Tutorials