css, fixed footer with 100% to big
I'm trying out using % instead of px and it behaves a bit strange. Why is
my footer continuing to the right (outside the element
"pagePlaceHolderInner") It works if I set both elements
("pagePlaceHolderInner" and "footer") to a certain px-number but i want to
use % here.
The code:
<html>
<head>
<style type="text/css">
body #pagePlaceHolderOuter {
background: #FFFFFF;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner {
background: none repeat scroll 0 0 yellow;
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
background: gray;
bottom: 0;
height: 20%;
position: fixed;
width: 100%;
}
</style>
</head>
<body>
<div id="pagePlaceHolderOuter">
<div id="pagePlaceHolderInner">
<h1>Hi guys!</h1>
<div class="footer"></div>
</div>
</div>
</body>
</html>
Or check jsfiddle
No comments:
Post a Comment