製作父母div大小調整爲100％的絕對居中的div div

我需要你的幫助。有沒有人知道一種製作父母的Div高度尺寸相對於其子div的方式。製作父母div大小調整爲100％的絕對居中的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>

來源

2015-12-02 Jason Kelly

這僅僅是一個糟糕的方式去佈局你的頁面。 –

我願意接受改進建議。 –

這樣怎麼樣？ https://jsfiddle.net/z5hf5qwf/ –

，而不是絕對定位，它與一組寬度改變爲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; 
}

來源

2015-12-02 19:55:26

製作父母div大小調整爲100％的絕對居中的div div

回答

相關問題