设置相对于固定元素的高度

Question

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

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

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>

Answer 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>

Answer 2

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

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

Answer 3

四个步骤：

修正 nav haut 在 top: 0 和 nav bas 在 bottom: 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>

设置相对于固定元素的高度

set height relative to fixed element

html

css

flexbox

responsive-design

responsive