Question

已经尝试查看

但是“继承表”解决方案对我不起作用

基本上，我想做的是填满身高也是100％的父母的可用身高；问题是我不想做溢出隐藏操作，而calc（）不是选项，因为前面的兄弟姐妹可能具有动态内容

这是我试图做的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>

Answer 1

我认为最简单的解决方案是使用嵌套的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>

高度100％，内部高度100％被前面的兄弟姐妹推动

1 个答案: