logo标签列表

为什么无法使此div高度达到100%？

css
3

我有一个被包含在几个宽度均为100%的其他div中的div。 我这样做是因为我有一个外部div，带有我想要围绕整个页面的轻微边框图像。

HTML：

<body>
<div class="container" >
    <div style="padding-top:15px; height:100%;">
        <div class="wrapper">
            <div class="contentContainer">
            test
            </div>
        </div>
    </div>
</div>
</body>

CSS:

*{margin:0; padding:0;}
body { margin: 0 auto; color: #333333;  }
html, body {  color: #000000;  margin:0;  padding:0;  height:100%; }

.wrapper {width:940px; margin-left:20px; margin-right:20px; background:#fff; overflow:hidden; margin:0 auto; height:100%;}

.container {min-height:100%;  height: auto !important; height:100%;  margin: 0 auto -30px;  width:980px; background:URL(images/bg_sides.jpg) repeat-y #f4f4f4;}

.contentContainer {width:920px; margin:0 auto; height:100%; }

Fiddle: http://jsfiddle.net/hc3Xu/2/

3个回答
3
在.container中，height: auto !important规则是罪魁祸首。
谢谢。那个有效。我忘了页脚必须保持在底部。不过现在我知道了，至少我可以重新排列一下东西。 - Sackling
1
@Sackling，虽然您可以接受任何您希望的答案，但公平起见，welldan97最先发布了答案，并真正值得获得勾选。 - Sparky
谢谢，@Sparky672。我在我的回答中放了一个演示链接。 - welldan97
2
希望这是您想要的：http://jsfiddle.net/c3Lxg/ 我已经从.container中删除了height: auto !important，该属性会覆盖其他高度。
0

.container 具有 height: auto !important 和 height: 100%。 !important 规则正在覆盖其他规则。移除它就可以了。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接