鉻</p> <pre><code><div id="wrapper"> <div id="content"> </div> </div> </code></pre> <p>的包裝DIV嵌套的div失靈在Chrome

，所以我有嵌套的div只是在一個盒子形狀的邊框的容器。在safari/firefox中，內容位於盒子內部，50％的內容div位於盒子中，但另外50％的時間位於盒子外部。我真的不知道該怎麼做，因爲它在Safari和Firefox中起作用，並且出於某種原因在Chrome瀏覽器中出現了問題。它可以只是我的電腦嗎？有沒有人遇到過這個問題？鉻</p> <pre><code><div id="wrapper"> <div id="content"> </div> </div> </code></pre> <p>的包裝DIV嵌套的div失靈在Chrome

感謝

#wrapper{ 
    display: block; 
    position: absolute; 
    top: 5%; 
    left: 0; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 90%; 
    background-color: #efefef; 
} 

#content{ 
    height:78px; 
    width:100%; 
    border-bottom:solid 1px gray; 
    font-weight:1000; 
    margin-left:0px !important; 
    background-color:white; 
}

來源

2015-02-11 Tim Mcneal

發佈完整的代碼示例，請。 – j08691 2015-02-11 20:00:57

請發佈您的CSS。這聽起來像是一個定位問題。一些更多細節將幫助我們。 – 2015-02-11 20:01:39

如果您發佈了兩個容器的CSS，它將會有所幫助，截至目前，內容應始終用wrapper封裝 – Huangism 2015-02-11 20:01:44

你有沒有在#wrapper試圖box-sizing: border-box;？

來源

2015-02-11 20:17:12 adamkista

當您使用position: absolute;時，它會從頁面上的自然元素流中移除該元素。如果你能夠，你應該刪除絕對位置。

請記住，如果您想使用高度百分比，則需要將頂級元素定義爲100％。

body,html { 
    width: 100%; 
    height: 100%; 
}

Body和HTML將從Window繼承。然後，頁面上的所有其他元素將從body或html繼承。

下面是完整的：

body, html { 
    width: 100%; 
    height: 100%; 
} 

#wrapper{ 
    display: block; 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 90%; 
    background-color: #efefef; 
} 

#content{ 
    height:78px; 
    width:100%; 
    border-bottom:solid 1px gray; 
    font-weight:1000; 
    margin-left:0px !important; 
    background-color:white; 
}

http://jsfiddle.net/twqxoc0j/

權衡，而且要記住最重要的事情，關於絕對定位是，這些元素從要素的流動取出在頁面上。具有此類定位的元素不是受其他元素影響的，並且不會影響其他元素。這個是一個嚴肅的事情，每次使用絕對定位時都要考慮。它過度使用或不當使用會限制您網站的靈活性。

來源：http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

來源

2015-02-11 20:30:21

鉻</p> <pre><code><div id="wrapper"> <div id="content"> </div> </div> </code></pre> <p>的包裝DIV嵌套的div失靈在Chrome

回答

相關問題