Make divs which are next to each other take up all vertical space with CSS

Question

I am trying to make a right hand menu with is always the same number of pixels wide and stretches too the bottom of the screen. To the left of that I want a div which fills up the rest of the space. The picture of what I have is shown here:

The HTML and CSS I am trying out are something like this:

<div class=App>
    <div class=Content>
        More Test
    </div>
    <div class=Menu>
        Just Test Text
    </div>
</div>

.App {
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
}

.Menu {
    background-color: #080;
    flex: 0 0 200px;
}

.Content {
    background-color: #f00;
    flex: auto;   
}

Here is a link to a working version of the simple page:

https://jsfiddle.net/tpjsaogx/

@Berto99 While I strongly prefer the latter, the former is not an error unless you're writing XHTML (and it is not relevant to the problem of this question). — Amadan, Feb 09 '21 at 00:43

score 1 · Accepted Answer · answered Feb 09 '21 at 00:50

Your height: 100% needs a reference height - the parent elements html and body won't have any height by themselves. So add this rule:

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

Here's your fiddle adapted accordingly: https://jsfiddle.net/3ck7dypo/

And here's the same code in this snippet:

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

.App {
  text-align: center;
  display: flex;
  width: 100%;
  height: 100%;
}

.Menu {
  background-color: #080;
  flex: 0 0 200px;
}

.Content {
  background-color: #f00;
  flex: auto;
}

<div class=App>
  <div class=Content>
    More Test
  </div>
  <div class=Menu>
    Just Test Text
  </div>
</div>

It worked, but I had to add "display: grid;" to the html and body CSS. For some reason my user agent style sheet was giving it "display: block" which was preventing your fix from working. Other display values might work with specified widths and heights, but I haven't tried them out yet. Thanks! — OpticalFlow, Feb 09 '21 at 01:20

score 0 · Answer 2 · answered Feb 09 '21 at 00:51

It's all about relative units. height:100% means that this element will take 100% height of its parent. In your case, since <div class="App"> is the first parent, setting it to 100% height isn't really doing anything. To stretch it to both boxes till the end of the page, all you need to do is give <div class="App"> a height of 100vh, where vh stands for viewport height. Essentially covering the whole height of the page. You can learn more about css units from MDN here

Make divs which are next to each other take up all vertical space with CSS

2 Answers2