Have two elements side by side fill all space vertically

Question

I have two elements in my page's body that I want to live side by side and fill all vertical space.

My code is super simple:

<!-- index.html minus all the usual junk-->
<!-- also ignore the lack of a url-tag and the like, it's intentionally left out -->
<body>
  <textarea id="text-field">
  <iframe id="render-field">
</body>

and

// index.css
body {
  font: caption;
  display: flex;
  height: 100%;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}

It doesn't matter what I try, the two elements will not fill all the sapce available in the body.

Any help?

You have to give it a set height, like 100px. There's no height for a browser window, they just scroll. Or try vh and vw https://www.w3schools.com/cssref/css_units.asp — Jerinaw, Apr 01 '17 at 20:50
But that alone won't work on all browsers if you don't use closing tags (see my answer below) — Johannes, Apr 01 '17 at 23:16
[Working with the CSS `height` property and percentage values](http://stackoverflow.com/a/31728799/3597276) — Michael Benjamin, Apr 02 '17 at 02:56
@Johannes doesn't matter, I'm using it for an Electron project. Browser compatibility is literally not a requirement — Electric Coffee, Apr 03 '17 at 06:25

score 1 · Answer 1 · answered Apr 01 '17 at 20:53

1

Here's a plunker example using vh

vh Relative to 1% of the height of the viewport*

Plunker example

Reference

answered Apr 01 '17 at 20:53

Jerinaw

5,260
7
41
54

Johannes · Accepted Answer · 2017-04-01T22:43:58.313

1

First of all, use closing tags.

Second, for height: 100%; you also need to apply that to the html tag to have a height reference for the body element. And also apply margin: 0 to html and body to reset the default margin to zero:

* {
box-sizing: border-box;
}
html {
  height: 100%;
  margin: 0;
}

body {
  font: caption;
  display: flex;
  height: 100%;
  margin: 0;
}

#text-field {
  font-family: Courier;
  width: 50%;
  flex: 1 0 auto;
}

#render-field {
  width: 50%;
  flex: 1 0 auto;
}

<body>
  <textarea id="text-field"></textarea>
  <iframe id="render-field"><iframe>
</body>

edited Apr 01 '17 at 22:43

answered Apr 01 '17 at 21:40

Johannes

64,305
18
73
130

why is resetting the default margin necessary? – Electric Coffee Apr 03 '17 at 06:26
1

as I wrote: Because all (or at least almost all, nut sure) browsers have a default margin (a few px) for the body element, which you only can get rid of that way. To see that default margin, just put a 100% wide DIV with a background color into an empty page: You'll see some space at all sides of the DIV due to that margin. – Johannes Apr 03 '17 at 08:51

Have two elements side by side fill all space vertically

2 Answers2