已经试过了
- > Height: 100% inside min-height: 100%
- > Children element with height: 100% getting pushed by siblings
但是“带继承的表”解决方案对我不起作用
基本上，我要做的是填充高度也为 100% 的 parent 的可用高度；问题是我不想做溢出隐藏并且 calc() 不是一个选项，因为前面的 sibling 可能有动态内容
这是我正在尝试做的事情的代码笔 https://codepen.io/arnotes/pen/PXMojN
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.h100 {
height: 100%;
}
</style>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
</head>
<body style="box-sizing: border-box; height: 100vh !important; margin: 0px; padding: 2em">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="h100" style="background-color: red;padding: 2em">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="h100" style="background-color:blue;padding: 2em">
<button>test button</button>
<br>
<button>test button</button>
<br>
<button>test button</button>
<div class="h100" style="background-color:yellow">
test yellow
</div>
</div>
</div>
</body>
</html>
最佳答案
我认为最简单的解决方案是使用嵌套的 flex 容器，您可以在其中依靠 flex-grow:1 让您的元素填充剩余空间:
* {
box-sizing: border-box;
}
.h100 {
flex-grow:1; /*fill the remaining space*/
display: flex;
flex-direction: column;
align-items: flex-start; /*avoid stretch effect on button*/
width:100%; /*make the div 100%*/
}
body {
margin: 0;
height: calc(100vh - 4em); /*Here you need calc to remove padding*/
padding: 2em;
display: flex;
flex-direction: column;
align-items: flex-start;
}
button {
flex-shrink:0; /*avoid button shrinking*/
}<body style="height: 100vh !important; margin: 0px; padding: 2em">
<button>test button</button>
<button>test button</button>
<button>test button</button>
<div class="h100" style="background-color: red;padding: 2em">
<button>test button</button>
<button>test button</button>
<button>test button</button>
<div class="h100" style="background-color:blue;padding: 2em">
<button>test button</button>
<button>test button</button>
<button>test button</button>
<div class="h100" style="background-color:yellow">
test yellow
</div>
</div>
</div>关于html - 高度 100%，内部高度 100% 被前面的 sibling 插入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54263593/