Question

我的布局主要分为3部分，中间部分应占满整个高度。而且确实如此。

但是，我需要一个附加的.body来充当背景，问题就在这里。这个孩子不想采取100％的身高。

这里.bg-gray是一个div，当没有足够的内容时它会被拉伸，而html, body { padding: 0; margin: 0; } .container { min-height: 100vh; display: flex; flex-direction: column; align-items: stretch; } .header { height: 50px; background-color: #e6e6e6; } .footer { height: 50px; background-color: #aaa444; } .body { flex: 1; } .bg-gray { background-color: #eee; min-height: 100%; flex: 1; }是我要使其父级全高的那个

有没有一种方法可以使用相对+绝对定位来实现没有？

我也在寻找我的问题的答案：为什么会这样呢？

<div class="container">
  
  <div class="header">
 
  </div>
  
  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>
    
  </div>
  
  
  <div class="footer">
 
  </div>
  
</div>

$dbServername = "localhost:8080";
$dbUsername = "root";
$dbPassword = "";
$dbName = "tickets";

$conn = mysqli_connect($dbServername, $dbUsername, $dbPassword, 
$dbName);

Answer 1

将flexbox应用于.body div。

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

html,
body {
  padding: 0;
  margin: 0;
}

.container {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.header {
  height: 50px;
  background-color: #e6e6e6;
}

.footer {
  height: 50px;
  background-color: #aaa444;
}

.body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.bg-gray {
  background-color: darkgrey;
  min-height: 100%;
  flex: 1;
}

.bg-gray div {
  background: lightblue;
}

<div class="container">

  <div class="header">

  </div>

  <div class="body">

    <div class="bg-gray">
      <div>
        asdasd
      </div>
    </div>

  </div>


  <div class="footer">

  </div>

</div>

柔性物品内的高度为100％

1 个答案: