CSS stretching to 100% Height

Question

I'm trying to accomplish something very simple. My poor rusty CSS skills do not help one bit.

This is want to achieve:

I cannot make it happen. If I use height: 100% it works when there isn't much text, but when I add a lot of Lorem Ipsum, the content div gets stretched and the left menu div doesn't scale with it.

I don't want to use JavaScript, just clean CSS if it's that's possible.

HTML:

<html>
<head>
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div id="header">Header</div>
<div id="menu">Menu</div>
<div id="content">Content (paste a lot of lorem ipsum here and menu doesn't stretch)</div>
</body>
</html>

CSS

body
{
    margin: 0;
    height: 100%;
    background-color: gray;
}
#header
{
    height: 50px;
    background-color: white;
    border: 1px solid black;
}
#menu
{
    width: 225px;
    float: left;
    height: calc(100% - 50px);
    background-color: white;
    border: 1px solid black;
}
#content
{
    overflow: auto;
    background-color: white;
    border: 1px solid black;
}

flex box is what your looking for. - https://css-tricks.com/snippets/css/a-guide-to-flexbox/ — Andrew, Aug 09 '16 at 11:09
It's actually not as simple as you think, and this is common design request asked by many, that is not straight forward or 'out-of-the-box' — Lee, Aug 09 '16 at 11:45
The appearance you desire **seems simple**, but is not. You're asking a lot of the browser. And, height 100% does not do what you think it does: http://stackoverflow.com/questions/7880365/why-does-100-not-mean-100-height. Lastly, you don't want 100% - you want 100% *minus the height of your header*. — random_user_name, Aug 09 '16 at 11:46

Paulie_D · Accepted Answer · 2016-08-09T12:05:50.900

4

Flexbox can do that.

Codepen Demo

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  height: 50px;
  background: #bada55;
}
section {
  display: flex;
  flex: 1;
  background: #c0ffee;
}
aside {
  width: 150px;
  background: darkgoldenrod;
}
main {
  min-height: 100%;
  /*height: 2000px;*/  /* uncomment this to see difference */
  background: blue;
  flex: 1;
}

<header></header>
<section>
  <aside></aside>
  <main></main>
</section>

edited Aug 09 '16 at 12:05

answered Aug 09 '16 at 11:45

Paulie_D

107,962
13
142
161

Will this always stretch to the bottom of the browser window? – random_user_name Aug 09 '16 at 11:47
Yes it will. Try It. Note, I haven't set a height on either the sicebar or the main content are other than `min- height:100%`. The sidebar always adjusts to the height of the main section. – Paulie_D Aug 09 '16 at 11:54
It should be noted that this code example doesn't include them, but it's probably recommended to use all the vendor prefixes. In my experience, it gets verbose, but has good browser support *unless you care about IE9*: http://caniuse.com/#search=flex – random_user_name Aug 09 '16 at 11:56
I don't include vendor prefixes unless asked. The user is capable of searching for those themselves but if necessary they are availlable in the Codepen by viewing the compiled CSS. – Paulie_D Aug 09 '16 at 12:00

score 1 · Answer 2 · answered Aug 09 '16 at 11:12

1

try to give height relative to viewport height. vh

   height:100vh;

answered Aug 09 '16 at 11:12

Abhishek

305
2
9

Does this work? Do you have a fiddle that demonstrates it? If so, this is an excellent solution. How does it accomodate the header space? – random_user_name Aug 09 '16 at 11:44
1

With lot of content this does not work - https://jsfiddle.net/kysaws32/1/ – Paulie_D Aug 09 '16 at 11:58

CSS stretching to 100% Height

2 Answers2