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
Post a Comment