Menu
Got stuck while trying to make an element in website behave like this:
<div class="for100procHeight">
<div class="header">fixed top</div>
<div class="content">long text with scrolling content</div>
<div class="footer">fixed bottom</div>
</div>
Quick reminder of css height:
Optimistic solution was:
.for100procHeight { height: 100%; }
.header, .footer { height: 20px; }
.content { height:100%; overflow:scroll; }
/* failed badly: footer didn't fit into the window (heightwise) */
With diminished optimism another attempt was made:
<div class="for100procHeight">
<div class="header">fixed top</div>
<div class="footer">fixed bottom</div>
<div class="wrapper">
<div class="content">long text with scrolling content</div>
</div>
</div>
.for100procHeight { height: 100%; }
.header, .footer { position: absolute; height: 20px; }
.content { height:100%; overflow:scroll; }
.header { top: 0px; left: 0px; }
.footer { bottom: 0px; left: 0px; }
.wrapper { padding-top: 20px; padding-bottom: 20px; }
/* failed badly: scroll down arrow was behind footer */
/* failed badly: scroll down arrow didn't fit into the window (heightwise) */
This looks almost as it should except that height is 100% of browser window (causing bottom of element to be outside of visible area). Margins/Paddings/Wrappers/etc don't change that.
I have looked at Complex height in CSS however JS support on client/element height looks even more fascinating.
Edit:
Copy paste from complex-height-in-css with extension
---------------------------------------
| fixed top | | fixed top | |
|-----------| |-----------| |
| long |^| | long |^| |
| text |_| | text |_| |
| with |_| | with |_| |
|scrolling| | |scrolling| | |
| content | | | content | | |
|-----------| |-----------| |
| fixed bott| | fixed bott| |
--------------------------------------
i realize having two of those was not mentioned, but neither was having <div class="for100procHeight"> as entire page content.
Solution:
<html>
<head>
<style>
html, body {
height: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
}
.page {
position: absolute;
height: 100%;
width: 100%;
}
.content {
width: 100%;
height: 100%;
overflow: scroll;
overflow-x: hidden;
}
.content .inner {
padding-top: 30px;
padding-bottom: 30px;
}
.top {
width: 100%;
margin-left: -17px;
position: absolute;
top: 0px;
left: 0px;
height: 30px;
background: url('background.gif');
}
.bottom {
width: 100%;
margin-left: -17px;
position: absolute;
left: 0px;
bottom: 0px;
height: 30px;
background: url('background.gif');
}
.top span, .bottom span {
padding-left: 17px;
z-index: 2000;
}
.top span, .bottom span {
display: block;
width: 100%;
}
#list2.page {
margin-left: 110%;
}
</style>
</head>
<body>
<div id="list1" class="page">
<div class="top"><span>top</span></div>
<div class="bottom"><span>bottom</span></div>
<div id="listContent" class="content">
<a id="page1" name="page1" style="width:1px;"></a>
<div class="inner">
...
</div>
</div>
</div>
<div id="list2" class="page">
<div class="top"><span>top</span></div>
<div class="bottom"><span>bottom</span></div>
<div id="listContent" class="content">
<a id="page2" name="page2" style="width:1px;"></a>
<div class="inner">
...
</div>
</div>
</div>
</body>
</html>
Let me know if I have misunderstood what you're looking for, but how about something like this:
CSS
* {
margin: 0px;
padding: 0px;
}
html, body {
height: 100%;
}
#wrapper {
position: relative;
min-height: 100%;
}
#header {
border: 1px solid #e3e3e3;
position: relative;
top: 0px;
left: 0px;
}
#footer {
border: 1px solid #e3e3e3;
position: relative;
margin-top: -20px; /* negative value of footer height */
height: 20px;
clear:both;
}
#content {
overflow: auto;
padding-bottom: 20px;
padding-left: 20px;
}
To make this work for IE, you would need a conditional in the <head> section to feed this style to IE 6 and lower and 8 and higher.
<!--[if !IE 7]>
<style type="text/css">
#wrapper {display:table;height:100%}
</style>
<![endif]-->
... and an Opera fix:
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;
}
HTML
<div id="wrapper">
<div id="header">header</div>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
<div id="footer">footer</div>
... check out the demo on jsFiddle and a demo with scrolling content. Note that the reason there is a scroll-bar in my first example is because jsFiddle puts in a padding: 10px; on the body of the iFrame containing the demo that I can't overwrite.
Here are some reference sources on a "sticky footer" and other good stuff:
If I misunderstood what you are looking for, then maybe this is a better example?
... and the tutorial on that
I hope this helps. Let me know if you have questions.
196
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
