make a div expand and contract its height given a change of screen resolution

Question

The pages I am trying to get to work are here. The issue is that I have been specifying a specific height for the middle div so that it would stay "connected" to the title above and the select list below. It works great, except that the whole thing doesn't stay the height of the window. I found out when I had a problem with an emulator that was changing my screen resolution. The way my browser displays it now, it's only about 2/3 the height of the window. Also, if I go from max to min on the window, the height then goes past the bottom of the window. The width is fine, but the height is the problem.

If you look at the page and view the source, you can see that I'm using divs, with one that acts as a container for everything, then a div for the titlebar, a div for the bottom bar and the center div for the content.

Answer 1

You could try something like this for height:

height: calc(100vh - 3.8rem);

Answer 2

Try changing the height to height: 90vh (or any other number it's up to you), vh is 1% relative of the viewport height

Answer 3

If your header and footer are fixed height and you want the footer always pinned at the bottom then I think you can get away with an absolute layout like this.

Just pin the footer down and have the content top/bottom set. Don't set height on the content to allow it to fill space between the header/footer.

body { margin: 0; height: 100vh; width: 100vw }

.header { height: 50px; background: blue }

.content { position: absolute; top: 50px; bottom: 50px; width: 100%; background: red }

.footer { position: absolute; bottom: 0; height: 50px; width: 100%; background: green }

<div class="header">Header</div>

<div class="content">Content</div>

<div class="footer">Footer</div>

You could also do it without the absolute positioning and just use calc() to adjust the height. For either solution you need the container (body in this case) set to fill the screen with vh/vw.

body { margin: 0; height: 100vh; width: 100vw }

.header { height: 50px; background: blue }

.content { height: calc(100% - 100px); background: red }

.footer { height: 50px; background: green }

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer</div>

There is another way with flexbox where you wouldn't need fixed heights on the header/footer - I may follow-up with that one...

EDIT: this would be my preferred way, flexbox so you don't have to worry about the heights of the header/footer, the content always stretches.

body { margin: 0; height: 100vh; width: 100vw; display: flex; flex-direction: column }

.header { background: blue }

.content {
  display: flex;
  flex: 1 1 auto;
  background: red;
}

.footer { background: green }

<div class="header">Header</div>
<div class="content">Content</div>
<div class="footer">Footer<br>With Line Break</div>

Answer 4

Try height:67vh; The height will remail two-thirds of the viewport height!

Answer 5

Please use css media queries for the specific height. Or, you can set height in rem. Because if you put it on rem, it will get optimized even if the screen is different.