Question

我有一个容器div，有两个孩子div，一个在顶部，另一个在底部。顶部的那个具有预定义的高度20px，底部的那个需要具有容器div的提醒的高度，所以我将其设置为100%但是它似乎与向下推的容器div具有相同的高度（请参阅隐藏容器的边框）。如何修复这个以使底部div扩展到剩余高度，而不明确指定其高度？

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div style="width:300px;height:200px;border:1px solid black">
      <div style="width:100%;height:20px;background-color:gray">
        div 1
      </div>
       <div style="width:100%;height:100%;background-color:orange">
        div 2
      </div>
    </div>
  </body>

</html>

Answer 1

您可以使用calc(100% - 20px)

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div style="width:300px;height:200px;border:1px solid black">
      <div style="width:100%;height:20px;background-color:gray">
        div 1
      </div>
       <div style="width:100%;height:calc(100% - 20px);background-color:orange">
        div 2
      </div>
    </div>
  </body>

</html>

或者想要增长以填充可用空间的孩子使用flex-direction: column和flex-grow: 1的flexbox

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <div style="width:300px;height:200px;border:1px solid black;display:flex;flex-direction:column;">
      <div style="width:100%;height:20px;background-color:gray">
        div 1
      </div>
       <div style="width:100%;flex-grow:1;background-color:orange">
        div 2
      </div>
    </div>
  </body>

</html>

设置具有剩余高度的子div

1 个答案: