set height relative to fixed element

Question

I have this code where i have two fixed navbars at the top and bottom.

I want the box to be of the size between the two navbars and to change it with the size of the nav changing with the size of the screen to always see the margin and the text of the cards.

body, html{
  width:100%;
  height:100%;
  margin:0;
}
  
.nav{
  padding:5px;
  margin:0;
  position:fixed;
  width:100%;
  background-color:#84a9ca;
  font-size:5vh;
}
.bas{
  opacity:0.5;
  bottom:0;
}
.box{
  width:100%;
  height:100%;
  background-color:#6ec6e1;
  display:flex;
  justify-content:space-around;
  
}
.element{
  background-color:#488a45;
  width:100px;
  margin:5px;
}

<!--change with the size of the window-->
<div class="nav haut">nav</div>
  <!--take all the place but want it to be just between the navs-->
  <div class="box">
    <!--text and margin hidden by the nav-->
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
  </div>
<!--transparent to show what's behind-->
<div class="nav bas">nav</div>

I would suggest looking at "Grid layout", it will likely make you life easier. — DBS, Apr 15 '20 at 09:57
This is what I want:https://framapic.org/mQr3u0HDrUjG/iVb2KyO5MB3n.png but responsive — rafalou38, Apr 15 '20 at 10:01
I think you got your question answered here: [Flexbox fill available space vertically](https://stackoverflow.com/a/40021077/3636917)! — wilfryed, Apr 15 '20 at 10:06

score 2 · Accepted Answer · answered Apr 15 '20 at 10:05

You can use flexbox on the body too, and remove the fixed position:

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

body {
  overflow: hidden; 
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.nav {
  padding: 5px;
  margin: 0;
  width: 100%;
  background-color: #84a9ca;
  font-size: 5vh;
}

.bas {
  opacity: 0.5;
}

.box {
  width: 100%;
  height: 100%;
  background-color: #6ec6e1;
  display: flex;
  justify-content: space-around;
}

.element {
  background-color: #488a45;
  width: 100px;
}

<!--change with the size of the window-->
<div class="nav haut">nav</div>
<!--take all the place but want it to be just between the navs-->
<div class="box">
  <!--text and margin hidden by the nav-->
  <div class="element">element</div>
  <div class="element">element</div>
  <div class="element">element</div>
</div>
<!--transparent to show what's behind-->
<div class="nav bas">nav</div>

score 1 · Answer 2 · answered Apr 15 '20 at 10:09

Four steps:

Fix the nav haut at top: 0 and the nav bas at bottom: 0
Give nav haut and nav bas a height and line-height of 32px
Give .box a margin-top of 32px
Give .box a height of calc(100vh - 64px)

This means that .box will always start directly beneath nav haut and will have the height of the entire page, minus the heights of nav haut and nav bas.

Working Example:

body {
  margin: 0;
}
  
.nav{
  position:fixed;
  width: 100%;
  height: 32px;
  line-height: 32px;
  text-align: center;
  background-color: #84a9ca;
}

.haut{
  top:0;
}

.bas{
  bottom:0;
}

.box {
  display: flex;
  justify-content: space-around;
  width: 100%;
  height: calc(100vh - 64px);
  margin-top: 32px;
  background-color: #6ec6e1;
}

.element{
  width: 100px;
  margin: 5px;
  background-color: #488a45;
}

<div class="nav haut">nav</div>
  <div class="box">
    <div class="element">element</div>
    <div class="element">element</div>
    <div class="element">element</div>
  </div>
<div class="nav bas">nav</div>

score 0 · Answer 3 · answered Apr 15 '20 at 10:07

0

Add this line of code in element css class

 .element {
 margin-top: 50px;
 margin-bottom: 50px;
 padding: 0px;
 }

answered Apr 15 '20 at 10:07

Fareed Khan

2,613
1
11
19

set height relative to fixed element

3 Answers3