Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Div height percentage based but still scrolling

Tags:

html

css

scroll

First off, similar but never answered questions:

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

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

I have an issue with scrolling a center part of the web page while its height needs to be auto.

Here is a fiddle

The header needs to be on top at all times, meaning I don't want the body to become larger than 100%.

However the div #messages can become larger, and that div needs to scroll on its own.

The #messages has a margin-bottom to leave room for the fixed bottom div.

I tried making the div #messages with box-sizing: border-box; and making it height:100% and padding to keep it in place but this was a really nasty looking solution and the scroll bar was the full page height instead of only the inner part.

Any help would be greatly appreciated.

like image 349
MakuraYami Avatar asked Oct 01 '13 14:10

MakuraYami


1 Answers

You want something like This

Or maybe - his big brother..

Pure CSS solution, without fixing any height.

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;
}
like image 196
avrahamcool Avatar answered Sep 19 '22 04:09

avrahamcool