使用絕對居中的div將父div調整為子div的100％

Question

我需要你的幫助。 有誰知道一種使父級Div高度相對於其子級div的方法。

如果我為DIV #layout定義了自動高度，則div的大小將調整為我的頁面窗口的100％。 但是，如果我在#layout div上定義了高度，那么我需要考慮屏幕上使用的每個像素，以使邊框div周圍的邊框保持整潔。 如何使#layout div框上的高度重新調整為其內容？

下面是問題的圖片。 如您所見，＃box6打破了#layout div。

也許我缺少了一些我忽略了的東西，但是我不確定從哪里開始。

這是有問題的HTML和CSS：

 * { font-family: Segoe UI; font-size: 9pt; } html, body { padding: 0; margin: 0; } body { background: rgb(187, 195, 203); } .Absolute-Center { margin: auto; position: absolute; top: 0; left: 0; bottom: 0; right: 0; } #layout { width: 900px; height: 400px; border: 1px solid rgb(112, 112, 112); } #box1 { background: rgb(141, 155, 169); color: #FFF; padding: 3px; font-weight: bold; } #box2 { width: 100%; background: rgb(240, 240, 240); border-bottom: 1px solid rgb(180, 180, 180); padding: 4px; box-sizing: border-box; } #box3 { width: 100%; border-bottom: 1px solid rgb(180, 180, 180); } #box4 { background: #FFF; float: left; width: 175px; height: 375px; border-right: 1px solid rgb(180, 180, 180); } #box5 { background: rgb(240, 240, 240); height: 375px; } #box6 { width: 100%; height: 100px; background: blue; } #leftcolumn { float: left; } #rightcolumn { border: 0; padding: 3px; text-align: center; } .clear { clear: both; } 

 <div id="layout" class="Absolute-Center"> <div id="box1">Application Title</div> <div id="box2"> <div id="leftcolumn"></div> <div id="rightcolumn">Some text in here later</div> <div class="clear"></div> </div> <div id="box3"> <!-- LEFT WINDOW PANE --> <div id="box4"> <ul> <li data-show="#1">File Information</li> <li data-show="#2">Comments</li> </ul> </div> <!-- RIGHT WINDOW PANE --> <div id="box5"></div> </div> <div id="box6"></div> </div> 

Answer 1

而不是使用絕對值定位，而是將其更改為margin: auto以設置的寬度margin: auto設置，這樣高度將取決於內部元素，邊框將根據容器進行調整。 參見小提琴https://jsfiddle.net/z5hf5qwf/

CSS

.Absolute-Center {
  margin: auto;


}
#layout {
    width: 900px;
    margin-top: 5%;
    margin-bottom: 5%;
    background-color: red;
    border: 1px solid red;
}