HTML div超出了父容器的最大高度

Question

我知道有很多問題要問同樣的事情，但是我遇到的所有解決方案都無法解決我設置的情況。

我有一個簡單的結構，具有一個主要的外部div和一個內部div。 在內部div中，我分別分為10％和90％高度的兩個。 第二個分隔似乎超出了max-height設置的限制，我似乎無法弄清楚為什么。

編輯我需要滾動條出現在第二個分隔（.content）中，而不是在內部div（.main-body）中

 .outer-layer { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 15000; top: 0; left: 0; padding: 10px; } .main-body { position: fixed; top: 18%; left: 18%; background: #fff; width: 60%; min-height: 30%; max-height: 60%; padding: 10px; } .header { height: 10%; max-height: 10%; background: red; } .content { max-height: 90%; width: calc(100% - 20px); height: 90%; background: blue; padding: 10px; overflow: auto; } 

 <div class="outer-layer"> <div class="main-body"> <div class="header"> <h2>Hello</h2> <!--header--> </div> <div class="content"> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <!--content--> </div> <!--body--> </div> <!--overlay--> </div> 

我目前正在Chrome瀏覽器中進行測試

我包括了這個小提琴

Answer 1

您想要的是JSFiddle嗎？

您在原始版本中有一些小毛病，我整理過並在下面概述...

1.您不能在其父級沒有設置高度的元素上使用基於百分比的高度。 因為您沒有給.main-body設定高度，所以它的子代將不會遵守基於百分比的高度。 這可以通過給.main-body一個高度來解決。

2.您的<h2>具有很大的垂直邊距，因此它的高度正在擴展超過其父代的高度。 通過執行h2 {margin: 0;}刪除它們。

3.請記住，填充是可加的 ！ 元素頂部和底部的10px填充會將其高度增加20px。 您可以使用box-sizing: border-box; 在元素上避免這種情況-強制元素向內而不是向外應用其填充，從而不會弄亂其高度/寬度。

Answer 2

該頁面無論如何都需要呈現信息。 假設內部內容大於外部內容，則使用overflow為您創建一個滾動條。

.main-body {
  overflow-y: scroll;
}

http://www.w3schools.com/cssref/pr_pos_overflow.asp

---

發布編輯更新：

.header {
  position:fixed;
  width: 60%;
}

.content {
  margin-top: 10%; // To match the header's height
}

樣式將關閉，但您可以對其進行調整以更好地適合您的項目。

Answer 3

JSfiddle： https ://jsfiddle.net/nu5LkL6b/9/

如前所述：您不能在其父級沒有設置高度的元素上使用基於百分比的高度。 因為您沒有給.main設定高度，所以它的子代將不會遵守基於百分比的高度。 這可以通過給.main-body一個高度來解決。

小恩克：

.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}

CSS：

.outer-layer {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .6);
  z-index: 15000;
  top: 0;
  left: 0;
  padding: 10px;
}
.main-body {
  position: fixed;
  top: 18%;
  left: 18%;
  background: #fff;
  width: 60%;
  min-height: 30%;
  height: 60%;
  padding: 10px;
}
.header {
  height: 10%;
  max-height: 10%;
  background: red;
}
.content {
  max-height: 90%;
  width: calc(100% - 20px);
  height: calc(90% - 20px);
  background: blue;
  padding: 10px;
  overflow: auto;
}
h2 {
  margin-top: 0;
}

Answer 4

您的h2具有“本機”邊距，該邊距被添加到main-body高度並破壞了百分比。 刪除此邊距。 然后，您main-body也會添加額外的像素填充。 刪除它，則90% + 10%將適合100% 。

 h2 { margin: 0; } .outer-layer { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, .6); z-index: 15000; top: 0; left: 0; padding: 10px; } .main-body { position: fixed; top: 18%; left: 18%; background: #fff; width: 60%; min-height: 30%; max-height: 60%; } .header { height: 10%; max-height: 10%; background: red; } .content { max-height: 90%; width: calc(100% - 20px); height: 90%; background: blue; padding: 10px; overflow: auto; } 

 <div class="outer-layer"> <div class="main-body"> <div class="header"> <h2>Hello</h2> <!--header--> </div> <div class="content"> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <p>dynamic content</p> <!--content--> </div> <!--body--> </div> <!--overlay--> </div> 

Answer 5

您需要為父元素（即.main-body增加高度

 .main-body{
        height:72%;    /* added */
        padding:0px;  /* editied  */
    }
    .header{
      height:20%;   /* edited*/
      max-height:20%; /* edited but actually not needed to have max height */
    }