CODEWITHSUNDEEP
cssheight
Dominik Baumgartner
Dominik Baumgartner

Reputation: 41

Css: adjust height of one element according to parent, keep height of other elements

What i am trying to achieve is, that div 1 and 3 should keep their height, while div 2 should adjust to the height of the container.

enter image description here

A solution, which works on all the major mobile browsers would be great.

Upvotes: 0

Views: 116

Answers (1)

hungerstar
hungerstar

Reputation: 21675

flexbox is a great option for this and all you have to do is set flex-grow: 1 to the element that needs to be dynamic an fill the remaining space.

Fixed Height Example

section {
  display: flex;
  flex-direction: column;
  height: 400px;
}

header,
footer {
  min-height: 75px;
}

header {
  background-color: gold;
}

main {
  flex-grow: 1;
  background-color: skyblue;
}

footer {
  background-color: indianred;
}
<section class="container">
  <header>1</header>
  <main>2</main>
  <footer>3</footer>
</section>

Viewport Example

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header,
footer {
  min-height: 75px;
}

header {
  background-color: gold;
}

main {
  flex-grow: 1;
  background-color: skyblue;
}

footer {
  background-color: indianred;
}
<header>1</header>
<main>2</main>
<footer>3</footer>

Upvotes: 1

Related Questions