Question

当父div（包装器）设置为100％时，我遇到了将子div（contentwrapper）设置为100％高度的问题。

任何想法为什么？

此布局的目标是

100％标题固定LEFT，100％正确 100％页脚（但总是在底部）

感谢任何帮助。

感谢，

<form>
<div id="wrapper">
<header>
<div id="header">my header</div>
</header>
<div id="contentwrapper">some other items</div>
<footer>
<div id="footer">my footer</div>
</footer>
</div>
</form>


html, body, form {
border: 0;
margin: 0;
height: 100%;
_height: 100%;
width: 100%;
}

#wrapper {
    background-color: #DDDDDD;
    height: auto !important;
    height: 100%;
    margin: 0;
    min-height: 100%;
    position: relative;
    width: 100%;
}

#header {
    height: 50px;
    background-color: #666;
    width: 100%;
    _width: 100%; /* ie6 */
    z-index: 100;
}

#footer {
    width: 100%;
    background-color: #CCC;
    position: absolute;
    bottom: 0 !important;
    bottom: -1px;
    height: 40px;
    clear: both;
}

#contentwrapper {
    height: 100%;
    min-height: 100%; 
    background-color: Yellow;
}

Answer 1

我想要指出的第一件事是，使用CSS3设计DIV或任何东西时，一个好的经验法则是始终按类进行操作，这样您就可以将类分配给多个元素并重用它们以避免重复代码。 ID更适用于定位对象并将它们分开，这样可以避免在探索jQuery / javascript时出现问题。

制作div 100％高度时需要做的是将元素html和body指定为高度：100％。然后身体内的任何东西必须将“最小高度”设置为100％。高度不会成功，这只是CSS的一个奇怪的解决方法。看起来你有这种情况，但是重复的高度属性是相互冲突的并且弄乱了。

页脚没有粘在页面底部的问题是你将它绝对放在底部。如果将其更改为固定，它将粘贴到浏览器窗口的底部。它是40px，所以记得在contentwrapper的底部添加40px的填充以避免覆盖内容

另外，我看到你重置了你的CSS中的边距/填充。一个好的工具是一个CSS重置样式表，包含在Eric Meyer制作的所有页面中。你可以在这里找到它：

http://meyerweb.com/eric/tools/css/reset/

这将使烦人的默认样式与所有浏览器中的各种属性相匹配。

希望我理解你的问题，这有帮助。

我的孩子div没有继承100％的身高

1 个答案: