0

I'm trying to make a flex layout with three rows, total 100% height. The main content should stretch to fill the remaining space. But this code makes the full page use just over 100% of the height.

Here is a minimal example:

html,
      body {
        height: 100%;
      }

      #container {
        height: 100%;
        display: flex;
        flex-flow: column;
      }

      #main {
        flex: 1;
      }
    <div id="container">
      <div id="main">
        main content
      </div>

      <div>
        footer one
      </div>

      <div>
        footer two
      </div>
    </div>
Dai
  • 141,631
  • 28
  • 261
  • 374
Dima
  • 459
  • 1
  • 3
  • 13
  • 1
    Use `flex-basis` (with `flex-grow`/`flex-shrink`) not `height`, and [learn about how `box-sizing` works](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) – Dai Feb 26 '23 at 18:52
  • _"trying to make a flex layout with three rows"_ - flexbox is not intended for multi-row layouts (well, multiple-rows with _column-like_ layouts, at least) - is there a reason you're not using `display: grid;` instead? – Dai Feb 26 '23 at 18:54
  • @Dai learn how self identification works. – morganney Feb 26 '23 at 18:56
  • @Dai I used flex simply because it was what most of the search results talked about when searching for how to create a header, content, footer layout. I'll look at the link you added. – Dima Feb 26 '23 at 18:58
  • It appears adding `margin:0` to `body` fixes this. – Dima Feb 26 '23 at 19:12
  • @morganney I beg your pardon? – Dai Feb 26 '23 at 20:10
  • @Dai apologies, my mistake. – morganney Feb 26 '23 at 21:41

0 Answers0