Question

我正在尝试使用Flexbox，我想知道是否有一个属性，例如flex：1，它允许元素的高度为页面高度的100％而不添加滚动条来滚动下。如果我要调整它的大小，它会坚持而不是添加滚动条。我希望你明白。我添加了一个高度设置为1000px的小提琴，我希望你们中的任何一个/女孩知道如何将它设置为100％的页面。

https://jsfiddle.net/mL594h73/

HTML：

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

CSS：

.wrapper {
display: flex;
}

.box-1 {
flex: 1;
width: 200px;
height: 1000px;
background-color`enter code here`: #2ABB9B;
}

.box-2 {
flex: 1;
width: 200px;
height: 1000px;
background-color: #16A085;
}

Answer 1

在height:100vh中使用.wrapper，并从margin

中删除默认body

body {
  margin: 0
}

.wrapper {
  display: flex;
  height: 100vh
}

.wrapper>div {
  flex: 1;
  width: 200px;
}

.box-1 {
  background-color: #2ABB9B;
}

.box-2 {
  background-color: #16A085;
}

<div class="wrapper">
  <div class="box-1"></div>
  <div class="box-2"></div>
</div>

Answer 2

只需从正文中移除默认边距，然后将min-height添加到您的父div [{1}}，如下所示：

wrapper

Answer 3

也许另一种方法是设置'position：absolute'以使height:100%正常工作。您还可以为主容器设置display:table，并为display:table-cell设置height:100%以适应.wrapper { display:table; position:absolute; width:100%; height:100%; } .box-1 { display:table-cell; vertical-align:middle; text-align:center; width: 200px; background-color: #2ABB9B; } .box-2 { display:table-cell; vertical-align:middle; text-align:center; width: 200px; background-color: #16A085; }

工作示例：https://jsfiddle.net/mL594h73/1/

高度100％的页面？

3 个答案: