Question

我正在为我的博客设计一个页面，我发现当我在div.page-content中有body时，它会出现故障并将整个body调整到最顶层div ...我需要body来填充视口，无论如何。

相关HTML

<body>
    <div class="page-content"> <!-- THIS IS MY .page-content DIV -->
        asdasd
    </div>
</body>

相关CSS

body, html {
    height: 100%; width: 100%; /* Shouldn't this make the page guaranteed to fill the viewport? */
    margin: 0; padding: 0;
    background-color: #fdfdfd;
    font-family: Roboto, Arial;
    color: #424242;
    background-repeat: no-repeat;
    background-size: cover; /* I'm gonna have a blurred background image */
}

.page-content {
    min-height: 300px; width: 600px;
    margin: 60px auto 30px auto;
    background-color: blue;
}

JSFiddle：http://jsfiddle.net/deansheather/5et5kgsn/

我不知道是否有javascript方法可以解决这个问题，但我更喜欢CSS和HTML只能回答。

对于这个非常奇怪的解释我很抱歉，这就是我的想法。

Answer 1

您必须将.page-content类高度设置为auto。认为你的问题已经解决了。试试这个：

body, html {
    margin: 0; padding: 0;
    background-color: #fdfdfd;
    font-family: Roboto, Arial;
    color: #424242;
    background-repeat: no-repeat;
    background-size: cover; /* I'm gonna have a blurred background image */
}    
.page-content {
        min-height: 300px; width: 600px; height: auto;
        margin: 60px auto 30px auto;
        background-color: blue;
    }

体内的HTML div调整整个页面的大小

1 个答案: