Css：填充从页眉到页脚 100% 空间的弹性列

问题描述 投票：0回答：1

我正在学习 html/css vanilla 设计。 我的布局应该是一个页眉、一个页脚和 3 列，填充所有空间，无论其内容如何。 我正在考虑基于网格的 3 列布局，想法是使用 display:flex;用于拉伸中心列以填充父容器的 100% 高度。

body {
margin: 0px;
padding: 0px;
box-sizing: border-box;  
}
header {
  position: sticky;
  top: 0;
  background-color:rgb(89, 89, 165);
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
  flex: 1;
  padding: 0.1em;
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  padding: 5px;
  background-color: darkslategray;
  height: 2vm;
  font-style: italic;
  font-size: 1vm;
  display: flex;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-items: center;
  .main-column {
    display: flex;
    border-style: groove;
    border-width: 4px;
    padding: 1em;
    justify-content: center;
    justify-self: stretch;
    align-self: stretch;
  }
}



   
 <body>
  <header>
    ...
  </header>
  <div class="main-container">
    <div class="left-column">
      ...
    </div>
    <div class="main-column">
      ...
    </div>
    <div class="right-column">
      ...
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>

https://codepen.io/idum/pen/GgKpmNd

问题是中心柱没有填满所有空间。

为什么？

html css flexbox css-grid
1个回答
0
投票

如果您对页脚使用非相对 

height
（在我的示例中为 20px，其中添加两倍 5px 填充），则可以在主列的 
calc
设置中使用 
height
。

在我的示例中，我将主要内容的 

heigth
定义为 
calc(100vh - 70px)
，即整个窗口高度减去页眉 40 像素和页脚 30 像素：

body {
margin: 0px;
padding: 0px;
box-sizing: border-box;  
}
header {
  position: sticky;
  top: 0;
  background-color:rgb(89, 89, 165);
  height: 40px;
  display: flex;
  justify-content: end;
  align-items: center;
  flex: 1;
  padding: 0.1em;
}

footer {
  bottom: 0;
  position: fixed;
  width: 100%;
  padding: 5px;
  background-color: darkslategray;
  height: 20pxvm;
  font-style: italic;
  font-size: 1vm;
  display: flex;
}

.main-container {
  display: grid;
  grid-template-columns: 1fr 3fr 1fr;
  justify-content: center;
  height: calc(100vh - 70px);
}
.main-container  .main-column {
    display: flex;
    border-style: groove;
    border-width: 4px;
    padding: 1em;
    justify-content: center;
    align-self: stretch;
 }
}
<body>
  <header>
    ...
  </header>
  <div class="main-container">
    <div class="left-column">
      ...
    </div>
    <div class="main-column">
      ...
    </div>
    <div class="right-column">
      ...
    </div>
  </div>
  <footer>
    ...
  </footer>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.