在另一个div中扩展div的高度

Question

我正在使用两个包装器时遇到问题。我想让min-height: 100%;始终延伸到屏幕的底部。现在使用#page-wrapper进行操作。在这个div中，我使用了另一个包装器#wrapper，它应该扩展到#wrapper div的底部。要使其有效，height: 100% div必须设置为min-height而不是#wrapper { width: 100%; background-color: #2f4050; min-height: 100%; position: relative; } #page-wrapper { padding: 0 15px; min-height: 100%; background-color: white; height: 100%; }。有没有办法实现这两个目标？

＆＃13;

＆＃13;

<div id="wrapper">
  <div id="page-wrapper"></div>
</div>

＆＃13;

List<string> revList = new List<string>  { "A", "NC", "New", "AB", "PD", "PD1", 
                                          "PD2", "B", "-", "*", "BB", "NA" };
revList = revList.OrderByDescending(i => i.ToLower() == "pd").
                  ThenByDescending(i => i.ToLower() == "nc").
                  ThenByDescending(i => i.ToLower() == "na").
                  ThenByDescending(i => i.ToLower() == "new").
                  ThenByDescending(i => i.ToLower() == "pd1").
                  ThenByDescending(i => i.ToLower() == "pd2").
                  ThenByDescending(i => i.ToLower() == "-").
                  ThenByDescending(i => i.ToLower() == "*").
                  ThenBy(i => i).ToList();

foreach (string rev in revList)
  Console.WriteLine(rev);

＆＃13;

＆＃13;

＆＃13;

Answer 1

尝试使用视口单元。

#page-wrapper {
  min-height: 100vh;
}

示例1：

＆＃13;

＆＃13;

body {
  margin: 0;
}
#wrapper {
  background: pink;
}
#page-wrapper {
  min-height: 100vh;
  background: gold;
}

＆＃13;

<div id="wrapper">
  <div id="page-wrapper">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

示例2：

＆＃13;

＆＃13;

body {
  margin: 0;
}
#wrapper {
  background: pink;
}
#page-wrapper {
  min-height: 100vh;
  background: gold;
}

＆＃13;

<div id="wrapper">
  <div id="page-wrapper">
    <div style="height:200vh;"></div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;