CSS How to set div height 100% minus nPx

Question

I have a wrapper div which contans 2 divs next to each other. Above this container I have a div that contains my header. The wrapper div must be 100% minus the height of the header. The header is about 60 px. This is fixed. So my question is: how do I set the height my wrapper div to be 100% minus the 60 px?

<div id="header"></div>
<div id="wrapper">
  <div id="left"></div>
  <div id="right"></div>
</div>

score 330 · Answer 1 · answered Feb 05 '13 at 21:58

330

In CSS3 you could use

height: calc(100% - 60px);

answered Feb 05 '13 at 21:58

libjup

4,019
2
18
23

33

Make sure you have space before and after "-" sign. Firefox need to have space before "-" sign. – Codler Apr 22 '13 at 10:33

score 80 · Accepted Answer · edited Oct 17 '14 at 13:04

80

Here is a working css, tested under Firefox / IE7 / Safari / Chrome / Opera.

* {margin:0px;padding:0px;overflow:hidden}
div {position:absolute}
div#header {top:0px;left:0px;right:0px;height:60px}
div#wrapper {top:60px;left:0px;right:0px;bottom:0px;}
div#left {top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
div#right {top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}

"overflow-y" is not w3c-approved, but every major browser supports it. Your two divs #left and #right will display a vertical scrollbar if their content is too high.

For this to work under IE7, you have to trigger the standards-compliant mode by adding a DOCTYPE :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
 *{margin:0px;padding:0px;overflow:hidden}
 div{position:absolute}
 div#header{top:0px;left:0px;right:0px;height:60px}
 div#wrapper{top:60px;left:0px;right:0px;bottom:0px;}
 div#left{top:0px;bottom:0px;left:0px;width:50%;overflow-y:auto}
 div#right{top:0px;bottom:0px;right:0px;width:50%;overflow-y:auto}
</style>
</head>
<body>
<div id="header"></div>
<div id="wrapper">
  <div id="left"><div style="height:1000px">high content</div></div>
  <div id="right"></div>
</div>
</body>

edited Oct 17 '14 at 13:04

cychoi

2,890
3
22
31

answered Jul 28 '09 at 10:46

Alsciende

26,583
9
51
67

It works in FF, but i don;t get it work under IE7. I only see 'Header' Code:
Header

Left

Right

– Martijn Jul 28 '09 at 11:11
Did you trigger the standards compliant mode ? I'll add an example page in my response. – Alsciende Jul 28 '09 at 12:31
1

Also, if you need to position these divs in the middle of the page or anywhere else, just wrap them in a container div and set `position: relative` on container. Then place the container anywhere you like on the page. – Mrchief Jul 30 '11 at 20:33
what about inner div, inside #left for instance if I want 2 divs with respective heights of 40% and 60%? – TecHunter Oct 16 '13 at 09:43
Is there a specific reason as to why px were specified on 0 value parameters? – Cassandra Dec 01 '16 at 04:36

score 47 · Answer 3 · answered Jul 28 '09 at 08:53

47

If you need to support IE6, use JavaScript so manage the size of the wrapper div (set the position of the element in pixels after reading the window size). If you don't want to use JavaScript, then this can't be done. There are workarounds but expect a week or two to make it work in every case and in every browser.

For other modern browsers, use this css:

position: absolute;
top: 60px;
bottom: 0px;

answered Jul 28 '09 at 08:53

Aaron Digulla

321,842
108
597
820

The site is only IE 7 compatible. When I use height: 100% and top: 60px; I still het a scrollbar. I can scroll 60px down. – Martijn Jul 28 '09 at 09:00
4

Don't specify a height, use top and bottom and let the browser calculate the height. – Aaron Digulla Jul 28 '09 at 09:27
But I want my page to have a max height of 100% minus 60px; If the content is larger than that, I want scrollbars in the div by using overflow: scroll; – Martijn Jul 28 '09 at 09:29
4

For a scrollbar, add a div inside of wrapper that fills it completely and make that overflow: scroll; – Aaron Digulla Jul 28 '09 at 09:49
Note that due to bugs in IE7, this might still fail. If you can't get it to work, use JavaScript. I know, you don't like it, but weight it against a week of work struggling with odd bugs. – Aaron Digulla Jul 28 '09 at 09:50
So, i should use javascript to set the height of #left and #right and apply an overflow to it? – Martijn Jul 28 '09 at 09:52
Sorry, I didn't make myself clear enough. I want a scrollbar in #left and #right – Martijn Jul 28 '09 at 09:53
Ah ... just set the height of both to 100%. But that might not work if you float them. If you need them next to each other, put them into a table. That's ugly but the most simple solution. In that case, you might be able to do without the wrapper div (just replace it with the table). – Aaron Digulla Jul 28 '09 at 09:56
I don't get why I should use tables. The must always be a 100 percent. Even if the content is smaller. The scrollbars have stick to the bottom of the viewport. Or maybe you can give me an example? – Martijn Jul 28 '09 at 10:22
@Martijn: What I'm saying is: Use tables if they fit the bill. Sure, you can spend a couple of weeks to find a "better" solution but that's going to cost you a couple of weeks. Using a table costs you a little bit of ego and ten minutes and it will just work. – Aaron Digulla Feb 13 '12 at 11:05

score 8 · Answer 4 · answered Jun 01 '18 at 11:34

8

div {
    height: 100%;
    height: -webkit-calc(100% - 60px);
    height: -moz-calc(100% - 60px);
    height: calc(100% - 60px);
}

Make sure while using less

height: ~calc(100% - 60px);

Otherwise less is no going to compile it correctly

answered Jun 01 '18 at 11:34

Dadhich Sourav

289
6
19

Jayaveer · Answer 5 · 2010-10-07T12:03:43.493

great one... now i have stopped using % he he he... except for the main container as shown below:

<div id="divContainer">
    <div id="divHeader">
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">
        </div>
        <div id="divContentRight">
        </div>
    </div>
    <div id="divFooter">
    </div>
</div>

and here is the css:

#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 250px;
    bottom: 0px;
}
#divContentRight {
    position: absolute;
    top: 0px;
    left: 254px;
    right: 0px;
    bottom: 0px;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

i tested this in all known browsers and is working fine. Are there any drawbacks using this way?

score 3 · Answer 6 · answered Jan 27 '16 at 13:31

3

You can do something like height: calc(100% - nPx); for example height: calc(100% - 70px);

answered Jan 27 '16 at 13:31

DrB

264
1
3
14

score 0 · Answer 7 · answered Jul 28 '09 at 16:36

This doesn't exactly answer the question as posed, but it does create the same visual effect that you are trying to achieve.

<style>

body {
  border:0;
  padding:0;
  margin:0;
  padding-top:60px;
}

#header {
  position:absolute;
  top:0;
  height:60px;
  width:100%;
}

#wrapper {
  height:100%;
  width:100%;
}
</style>

score 0 · Answer 8 · answered Jan 14 '13 at 21:39

In this example you can identify different areas:

<html>
<style>
#divContainer {
    width: 100%;
    height: 100%;
}
#divHeader {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    height: 28px;
    background-color:blue;
}
#divContentArea {
    position: absolute;
    left: 0px;
    top: 30px;
    right: 0px;
    bottom: 30px;
}
#divContentLeft {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 200px;
    bottom: 0px;
    background-color:red;
}
#divContentCenter {
    position: absolute;
    top: 0px;
    left: 200px;
    bottom: 0px;
    right:200px;
    background-color:yellow;
}
#divContentRight {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    width:200px;
    background-color:red;
}
#divFooter {
    position: absolute;
    height: 28px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    background-color:blue;
}
</style>
<body >

<div id="divContainer">
    <div id="divHeader"> top
    </div>
    <div id="divContentArea">
        <div id="divContentLeft">left
        </div>
        <div id="divContentCenter">center
        </div>
        <div id="divContentRight">right
        </div>
    </div>
    <div id="divFooter">bottom
    </div>
</div>

</body>
</html>

score 0 · Answer 9 · answered Mar 05 '15 at 22:59

I haven't seen anything like this posted yet, but I thought I'd put it out there.

<div class="main">
<header>Header</header>
<div class="content">Content</div>

Then CSS:

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

.main {
    height: 100%;
    padding-top: 50px;
    box-sizing: border-box;
}

header {
    height: 50px;
    margin-top: -50px;
    width: 100%;
    background-color: #5078a5;
}

.content {
    height: 100%;
    background-color: #999999;
}

Here is a working jsfiddle

Note: I have no idea what the browser compatability is for this. I was just playing around with alternate solutions and this seemed to work well.

Cade Roux · Answer 10 · 2009-07-28T10:16:33.197

-1

Use an outer wrapper div set to 100% and then your inner wrapper div 100% should be now relative to that.

I thought for sure this used to work for me, but apparently not:

<html>
<body>
<div id="outerwrapper" style="border : 1px solid red ; height : 100%">
<div id="header" style="border : 1px solid blue ; height : 60px"></div>
<div id="wrapper"  style="border : 1px solid green ; height : 100% ; overflow : scroll ;">
  <div id="left" style="height : 100% ; width : 50% ; overflow : scroll; float : left ; clear : left ;">Some text 

on the left</div>
  <div id="right" style="height : 100% ; width 50% ; overflow : scroll; float : left ;">Some Text on the 

right</div>
</div>
</div>
</body>
</html>

edited Jul 28 '09 at 10:16

answered Jul 28 '09 at 09:55

Cade Roux

88,164
40
182
265

Can give an example of that. I don't understand – Martijn Jul 28 '09 at 10:00
I posted what I was thinking of, but I can't get it working this early/late. Maybe if I get a little more sleep. – Cade Roux Jul 28 '09 at 10:17

score -2 · Answer 11 · answered Aug 24 '11 at 18:53

-2

If you don't want to use absolute positioning and all that jazz, here's a fix I like to use:

your html:

<body>    
   <div id="header"></div>
   <div id="wrapper"></div>
</body>

your css:

body {
     height:100%;
     padding-top:60px;
}
#header {
     margin-top:60px;
     height:60px;
}
#wrapper {
     height:100%;
}

answered Aug 24 '11 at 18:53

scotsqueakscoot

258
2
7

2

I don't think this works as expected. First `#header` should be `margin-top:-60px;`. Second, `height:100%` means that the height will be 100% of the parent elements height, not including margins, padding and borders. Depending on your scroll settings, this will either cause scroll bars to appear or your content to be cropped. – Kylos Nov 23 '11 at 18:21

CSS How to set div height 100% minus nPx

11 Answers11

Linked

Related