Question

我不能为我的生活弄清楚这一点。我正在尝试使用div为我的页面内容提供半透明背景。问题是div只会下降到内容。无论内容如何，我都希望不透明背景一直向下到页脚。我所指的页面位于此处。 www.codykrauskopf.com/circus（这是我上传的唯一页面）我正在重新设计网站以响应浏览器大小，因此不允许修复任何宽度或高度。

CSS：

html, body {
    height: 100vh;
    margin:0;
    padding:0;
    overflow:auto;
}

#circusContent {
    margin-left:100px;
    height:100%;
}

p {
    font-family:georgia;
}

div.topButtons {
    display:inline-block; 
    margin-top:15px;
    line-height:50px;  
    text-align:center;
    vertical-align:middle;
    width:130px;
    background: rgb(166, 166, 166); /* The Fallback */
    background: rgba(166, 166, 166, .5); 
}

#leftTopButton {
    margin-left:75px;
}

a.forms {
    text-decoration:underline;
}

div.topButtons:hover {
    background: rgb(100, 0, 0); /* The Fallback */
    background: rgba(0, 0, 0, 1); 
}

#circusParagraph{
    color:white;
    font-size:14px;
    text-align:center;
    margin-left:125px;
    margin-top:25px;
}

#wrap {min-height: 100vh;
width:99.99999999999%;}

Answer 1

在你的CSS中，你有一个错字。

#wrap {
    min-height: 100vh; <--- should be 100%

还有另一个错字

html, body {
    height: 100vh; <--- should be 100%
    margin:0;
    padding:0;
    overflow:auto;
}

在调试器中我更改了上面的css拼写错误，它解决了你的问题。

Answer 2

将circusContent的高度设置为100％，但必须是其父级的100％，所以父级也必须设置为100％但是100％是什么？这将是“换行”，所以将其高度设置为100％，这将是其父体的高度。

#main,
#wrap,
#content,
#circusContent {
    height:100%;
}

删除这些元素的其他高度。

现在，我看到你试图使用新的视口属性，vh，如果你仍然希望这样做，我将不得不考虑内部元素。

Div不继承父元素的高度

2 个答案: