How to make auto height content with scroll bar (when overflow) and bottom fixed footer?_问答_开发者

How to make auto height content with scroll bar (when overflow) and bottom fixed footer?

开发者 https://www.devze.com 2023-01-31 10:43 出处：网络

model it\'s possible? yes|no|javascript? ok. i\'ll try. Here must be: Header. Fixed size, fixed position (top)

相关专题：css

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.