Question

我正在使用下面的CSS，我得到的高度很好，但它失去了margin: 0 auto。如何更改css以便获得完整的窗口高度但是还有div中心？

CSS：

.container{
    width:960px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    margin: 0 auto;
    background:url('../img/bg.png') repeat;
    background-size:100% 100%;
}

Answer 1

这可能会引发您进一步的问题，但基本的想法是强制body和html有100%身高

HTML

<div class="page">
    content
</div>

CSS

html,
body {
    margin:0;
    height:100%;
}

.page {
    min-height:100%;
    margin:0 auto;
    width:300px;
    background:green
}

小提琴：http://jsfiddle.net/Varinder/fk9N3/

编辑：抱歉，当我说出更多问题时，我的意思是拉伸嵌套div以拉伸窗口的全高度会很棘手，因为在这种情况下你必须强制每个元素在链中有min-height:100%;

如下所示

<div class="some-wrapper">
    <div class="content-wrapper">
        <div class="some-other-div">
        </div>
    </div>
</div>

要使.some-other-div成为窗口的全高度 - 您必须将min-height:100%;添加到.some-wrapper, .content-wrapper，这有点难看

沿侧边位置使用边距

1 个答案: