Css middle fit browser remaining space

Question

I have three divs.

<header></header>
<div class="content"></div>
<footer></footer>

Header and footer are fixed height I want to the content div to fit the remaining browser height

How can i achieve this using css?

Currently it appears as image showing Content div should grow remaining space

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

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

.box header {
  flex: 0 1 auto;
}

body .content {
  flex: 1 1 auto;
}

body footer {
  flex: 0 1 auto;
}

There's .box in front of header but no element around header with class box — Corrl, Oct 27 '21 at 13:11

score 0 · Answer 1 · answered Oct 27 '21 at 13:33

Is this what you are trying to achieve? (header & footer set to fixed 100px, content taking up all place between)

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

main {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

header {
 height: 100px;
 background: pink;
}

#content {
  height: 100%;
  background: yellow;
}

footer {
  height: 100px;
  background: teal;
}

<!DOCTYPE html>
<html>

<head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css">
</head>

<body>
    <main>
        <header>
        </header>
        <div id="content">
        </div>
        <footer>
        </footer>
    </main>
</body>

</html>

Css middle fit browser remaining space

1 Answers1