How to make auto height content with scroll bar (when overflow) and bottom fixed footer?
model
it's possible? yes|no|javascript?
ok. i'll try.
Here must be:
Header. Fixed size, fixed position (top)
Content. Dynamic height, depends from window, header and footer size. Have sroll if overflow.
Footer. Always bottom fixed position. Fixed size.
Window. No Scroll (!important)
ps. to window. there is a bug or something. if it's Firefox or Opera key 'down' - scroll down. even if "no scroll" - hidden specified.
hope all clear
Done. Tnx.
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#header{
top:0;
left:0;
right:0;
height: 150px;
position:absolute;
}
#content {
position: absolute;
bottom: 150px; /*footer height*/
top:150px; /* header height */
left: 0;
right: 0;
background: yellow;
overflow: auto;
}
#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<开发者_如何转开发;body>
<div id='header'>
Header content
</div>
<div id="content">
dynamic content here
</div>
<div id="footer">
</div>
</body>
</html>
You could really make some nicer question.
<html>
<head>
<style type="text/css">
* { padding: 0; margin: 0;} /* do not use universal selector this is just for example */
#content {
position: absolute;
top: 0;
bottom: 150px;
left: 0;
right: 0;
background: yellow;
overflow: auto;
}
#footer {
position: absolute;
height: 150px;
bottom: 0;
left: 0;
right: 0;
background: red;
}
</style>
</head>
<body>
<div id="content">
</div>
<div id="footer">
</div>
</body>
</html>
Hello and welcome at Stackoverflow,
could you please post a more specific question? Just writing something in the Title and having a real question like "it's possible? yes|no|javascript?" does not help anyone.
To answer your question: yes, it is possible. You just need to use some css.
加载中,请稍侯......
精彩评论