Geek Answers Handbook

Percentage height based, but still scrolling

First of all, similar, but not answering questions:

vertically-scrolling-percentage-based-heights-vertical-margins-codepen-exampl

scroll-bar-on-div-with-overflowauto-and-percentage-height

I have a problem with scrolling the center of the webpage, while its height should be automatic.

Here is the fiddle

The title should be on top, so I do not want the body to become more than 100%.

However, div #messages can get bigger, and the div should scroll by itself.

#messages has a margin to leave room for a fixed lower div.

I tried to make a div #messagesusing box-sizing: border-box;and make it height:100%and indented to keep it in place, but it was really unpleasant solution, but the scroll bar was full height of the page, not just the inner part.

Any help would be greatly appreciated.

+4
source share
2 answers

You can try the following.

You HTML:

<div id="container">
    <div id="header">The header...</div>
    <div id="content">
        <div id="messages">
            <div class="message">example</div>
             ...
            <div class="message">example</div>
        </div>
        <div id="input">
            <div class="spacer">
                <input type="text" />
            </div>
        </div>
    </div>
</div>

Apply the following CSS:

html, body {
    height: 100%;
}
body {
    margin:0;
}
#header {
    background:#333;
    height: 50px;
    position: fixed;
    top: 0;
    width: 100%;
}
#content {
    position: absolute;
    top: 50px;
    left: 0;
    right: 0;
    bottom: 45px;
    overflow-y: scroll;
}
#messages {
    overflow: auto;
}
#messages .message {
    height: 79px;
    background: #999;
    border-bottom: 1px solid #000;
}
#input {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height: 45px;
}
#input .spacer {
    padding: 5px;
}
#input input {
    width: 100%;
    height: 33px;
    font-size: 20px;
    line-height: 33px;
    border: 1px solid #333;
    text-indent: 5px;
    color: #222;
    margin: 0;
    padding: 0;
}

See demo at: http://jsfiddle.net/audetwebdesign/5Y8gq/

First set the height to 100% in the tags htmland bodythat allows you to reference the height of the view port.

, #header position: fixed, #input.

#content, , overflow-y: scroll, ( ).


#input #content.

+5

-

- ..

CSS .

HTML:

<div class="Container">
    <div class="First">
    </div>
    <div class="Second">
        <div class="Content">
        </div>
    </div>
</div>

CSS

*
{
    margin: 0;
    padding: 0;
}

html, body, .Container
{
    height: 100%;
}

    .Container:before
    {
        content: '';
        height: 100%;
        float: left;
    }

.First
{
    /*for demonstration only*/
    background-color: #bf5b5b;
}

.Second
{
    position: relative;
    z-index: 1;
    /*for demonstration only*/
    background-color: #6ea364;
}

    .Second:after
    {
        content: '';
        clear: both;
        display: block;
    }

.Content
{
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: auto;
}
+6

More articles:


All Articles