Two divs bottom div to height adjust with browser window

Question

I have a header div and a div underneath it. I need the div underneath the header div to adjust depending on the height of the browser window size.

In CSS, when I add height:100% it creates a scroll bar at the side of the page. When I adjust the percentage of the width, spacing at the bottom of the page constantly changes because it is done with percentages.

I would like the div below the header to always adjust with the window size in height with no spacing at the bottom.

How do I do this?

Here is the Fiddle

JS Fiddle I am not sure why but in JSFiddle the bottom div is not extending height: 100%

here is the code: HTML

 <div class = "main">
  Header
 </div>
 <div class="left">
  Bottom Div
 </div>

CSS

.main {
width:100%;
height:60px;
border: solid;
}

.left {
height: 100%;
width: 300px;
border:solid;
}

score 4 · Accepted Answer · answered Jul 28 '14 at 14:35

try to use something like this code

html:

<div class = "main">
     Header
</div>
<div class="left">
    Bottom Div
</div>

css:

* {
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box; 
}
html, body {
    height:100%;
} 
body {
    padding:60px 0 0 0; /* 60 — header height*/
    margin:0;
}
.main,
.left {
    border:1px solid #000;
}
.main {
    width:100%;
    height:60px;
    margin-top: -60px;  /* 60 — header height*/
}

.left {
    height: 100%;
    width: 300px;
}

score 2 · Answer 2 · edited May 23 '17 at 10:28

You have a few options to achieve the layout you would like.

There are plenty of answers that address your problem from this similar question: Make a div fill the height of the remaining screen space

However, here is my solution: Just change your CSS a bit

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

.main {
    width:100%;
    height:60px;
    border: solid;
    position: absolute;
    background-color: #fff;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.left {
    height: 100%;
    width: 300px;
    border:solid;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 60px;
}

The box-sizing will prevent the padding-top and the borders from pushing the dimensions outside the browser window. The body,html height: 100%; is needed to allow other items to be 100% height (why your fiddle wouldn't work).

score 0 · Answer 3 · answered Jul 28 '14 at 14:32

0

CSS allows you to do some basic math, so the following would help you:

Given that your header has a fixed height of 60px:

.left {
  height: calc(100% - 60px);
}

Edit: you also have some extra padding and borders that you might want to take into consideration while calculating. Although I'm not a big fan of hard-coding values like that.

answered Jul 28 '14 at 14:32

gtramontina

1,096
9
10

This was a possible solution for me, but did not come out exactly the way I wanted it to, but thank you so much for your help! – user3173447 Jul 28 '14 at 14:59

score 0 · Answer 4 · edited May 23 '17 at 12:33

0

Try this in your style sheet

CSS

.left {
height: 100vh;
width: 100%;
border:solid;
}

Refer link
https://stackoverflow.com/questions/1622027/percentage-height-html-5-css

edited May 23 '17 at 12:33

Community

1
1

answered Jul 28 '14 at 14:37

Asha hegde

26
4

Two divs bottom div to height adjust with browser window

4 Answers4