相对于固定元素设置高度答案

【问题标题】：set height relative to fixed element [duplicate]相对于固定元素设置高度
【发布时间】：2020-04-15 18:16:06
【问题描述】：

我有这段代码，我在顶部和底部有两个固定的导航栏。

我希望框的大小在两个导航栏之间，并随着导航的大小随着屏幕大小的变化而改变，以便始终看到边距和卡片的文本。

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>

【问题讨论】：

我建议看一下“网格布局”，它可能会让你的生活更轻松。
这就是我想要的：framapic.org/mQr3u0HDrUjG/iVb2KyO5MB3n.png 但反应灵敏
我想你的问题在这里得到了回答：Flexbox fill available space vertically!

标签： html css responsive-design flexbox responsive

【解决方案1】：

你也可以在body上使用flexbox，去掉固定位置：

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>

【讨论】：

【解决方案2】：

四个步骤：

修复nav hauttop: 0和nav basbottom: 0
给nav haut和nav bas一个height和line-height的32px
给.box 一个margin-top 的32px
给.box 一个height 的calc(100vh - 64px)

这意味着.box 将始终直接在nav haut 下方开始，并且将具有整个页面的高度，减去nav haut 和nav bas 的高度。

工作示例：

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>

【讨论】：

【解决方案3】：

在元素css类中添加这行代码

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

【讨论】：