Menu
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
642
You cannot fix an element to a container the way you conventionally would like fixing it in reference to the whole page. Instead you can have to manually give it the same dimensions of the parent because it doesn't act like a usual child, but rather acts like an element positioned directly below the document
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
position: fixed;
height: 100%;
margin: 0 auto;
max-width: 1000px;
min-width: 700px;
width: 70%;
/* The rest of your code for this element */
}
Demo here
An alternative so it inherit the parent's values is to make its position absolute instead, though this isn't quite what you want. To do this you need to add position:relative; to it's container as well
body #pagePlaceHolderOuter #pagePlaceHolderInner {
position:relative;
/* The rest of your code for this element */
}
body #pagePlaceHolderOuter #pagePlaceHolderInner .footer {
position:absolute;
/* The rest of your code for this element */
}
Updated jsFiddle
155
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
