铬</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

回答

相关问题