css - Website height > 100% -


i started website yesterday, trying out different things can apply them later on when start making websites companies etc. anyway, wondering wrong code. want website 100% in height. got sorted out @ first, when applied transparant background image div 'content' website's height wasn't 100% anymore. (you need scroll bottom of page). me solving problem? appreciated! (i looked tons of earlier asked questions, did not have answer looking for.)

html {            background: url('http://i.imgur.com/dbg9grg.jpg') no-repeat center center fixed;            -webkit-background-size: cover;           -moz-background-size: cover;           -o-background-size: cover;           background-size: cover;           height: 100%;         }  body {     margin: 0;     padding: 0;     height: 100%;    }  #header {     width: 100%;     height: 75px;     background-color: rgba(0, 0, 0, 1);   }  #logo {     width: 25%;     height: 75px;     float: left; }  #content {     width: 100%;     height: 100%;     background-image: url('http://i.imgur.com/rm9fzh0.gif');     background-repeat: repeat;     margin: auto;     min-height: 100%; }  #song {         position: absolute;         bottom: 0;         left: 0;         margin: 20px;    } 

and html: (if required)

<div id="header">     <div id="logo">     <img src="images/logo.png" href="index.html" />     </div> <!-- close logo --> </div> <!-- close header -->  <div id="content"> <div id="nav">     <ul>     <li><a href="visit.html">visit tromsø</a></li>     <li><a href="about.html">about us</a></li>     <li><a href="contact.html">contact us</a></li>     </ul> </div> <!-- close nav --> <div id="song">  <audio autoplay="autoplay" controls="controls">      <source src="music.ogg" />      <source src="music.mp3" />   </audio>   </div> <!-- close song --> </div> <!-- close content --> 

the css pasted down there isn't whole thing, sure 'nav' not have effect on height of page. in advance!

that's because child element larger body.

your #content has height: 100%, not it's not div in body has margins , paddings.

when set height: 100% of child element, it's height equal height of parent (before applying margins , paddings). #content @ least tall body, , therefore whole page taller that.

you need fix accordingly.


Comments

Popular posts from this blog

php - Why I am getting the Error "Commands out of sync; you can't run this command now" -

linux - Does gcc have any options to add version info in ELF binary file? -

java - Are there any classes that implement javax.persistence.Parameter<T>? -