CODEWITHSUNDEEP
css
Mike Croteau
Mike Croteau

Reputation: 1132

Multi div combined height 100%, one div with static height

I have what seems to be a simple css question but having difficulty achieving. I have 2 divs that sit one on top of the other. I would like the combined height of both divs to be 100% but the top to be a static defined height. The bottom div will contain a list of data that will overflow to scroll. What is the best way to achieve this? Below is sample code for something close.

#container{
    height:auto;
    height:100%;
    min-height:100%;
}

#top{
    height:175px;
    min-height:175px;
    max-height:175px;
}

#bottom{
    height:70%;
}

<div id="container">
    <!-- top div set to 100px -->
    <div id="top"></div>
    <!-- bottom div dynamic height based on remaining real estate -->
    <div id="bottom"></div>
</div>

Upvotes: 4

Views: 709

Answers (3)

Mustafa Yilmaz
Mustafa Yilmaz

Reputation: 67

You can achieve this by defining a height and min-height on your containers.

First of all you need to define a height: 100% in your body (and html). Than you need to create a container div which will be the mother of your top and bottom divs. Than use position: relative and min-height: 100% in your container div.

You can align your top div to top: 0 and left: 0 a definite height and position absolute. You can align your bottom div to bottom: 0 and left: 0 a calc function and position absolute. For the content scrolling part in bottom div use overflow scroll.

JSFiddle Example

Right now, I am using a french (or german keyboard) which is quite hard for me to use. I will edit the answer with a more meaningful text when I return home.

This is a basic css file that you can use.

html, body { height: 100%; margin:0; }

.container {
    position: relative;
    min-height: 100%;
}

.top {
    background: black;
    color: white;
    height: 200px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    background: yellow;
    height: calc(100% - 200px);
    overflow: scroll;

}

Upvotes: 1

Stickers
Stickers

Reputation: 78676

You could use CSS calc(), so #bottom {height:calc(100% - 175px);}.

html, body {
    height:100%;
    margin:0;
}
#container {
    height:100%;
}
#top {
    height:175px;
    background:lime;
}
#bottom {
    height:calc(100% - 175px);
    background:teal;
}
<div id="container">
    <div id="top">top</div>
    <div id="bottom">bottom</div>
</div>

Or use CSS table layout if you need to support more browsers.

html, body {
    height:100%;
    margin:0;
}
#container {
    height:100%;
    width:100%;
    display:table;
}
#top, #bottom {
    display:table-row;
}
#top {
    height:175px;
    background:lime;
}
#bottom {
    height:100%;
    background:teal;
}
<div id="container">
    <div id="top">top</div>
    <div id="bottom">bottom</div>
</div>

Upvotes: 3

gopalraju
gopalraju

Reputation: 2309

You can use height:calc(100% - 175px); for this:

http://jsfiddle.net/9ygz4pnj/

html,body,#container{
    height:100%;
}

#top{
    height:175px;
    border:1px solid red;
}

#bottom{
    height:calc(100% - 175px);
    border:1px solid green;
}

Upvotes: 1

Related Questions