CODEWITHSUNDEEP
htmlcss
lazycommit
lazycommit

Reputation: 414

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>

Upvotes: 0

Views: 1198

Answers (2)

Ivan Ivanic
Ivan Ivanic

Reputation: 3054

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>

Upvotes: 1

DKSan
DKSan

Reputation: 4197

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.

Upvotes: 0

Related Questions