Question

我在这里遇到了一个有趣的问题。我的结构是

body
|----site-wrapper
       |-----cover-wrapper

高度设置为100％，当我设置site-wrapper背景颜色时，它看起来很好，但是当我设置cover-wrapper背景颜色时，它只包装背景颜色以适应内容（某些文字），而不是扩展到整个屏幕，我在Chrome和Firefox上都试过了。检查效果：http://jsfiddle.net/h82Ne/

这是css：

html{
    height: 200%
}
body {
    height: 100%;
    background-color: #333;
}

.site-wrapper {
    display: table;
    width: 100%;
    height: 50%; /* For at least Firefox */
    min-height: 50%;
    background-color: #000;
}

.cover-wrapper {
    display: table;
    width: 100%;
    height: 100%; /* For at least Firefox */
    min-height: 100%;
    background-color: #0f0;
}

Answer 1

如果您希望.cover-wrapper覆盖您可以使用的整个页面：

.cover-wrapper {
    width: 100%;
    height: 100%; /* For at least Firefox */
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: #0f0;
}

这会使它更像覆盖物。

Answer 2

问题解决了，它由我自己的错误造成，我想念网站包装内部的css。

对此感到抱歉

CSS背景颜色包装（导致错误）

2 个答案: