Question

我希望网站始终垂直覆盖浏览器窗口。我将body，html和#wrapper设置为height：100％;这就完成了工作。

但是，如果我在页面上添加足够的内容以超过浏览器窗口高度。主体，html和包装器不会随内容扩展。这使得内容超出了正文，html和包装器。我在13“macbook屏幕上”服务，支持OCH PROVMONTAGE“看起来就像我想要的那样，因为没有足够的内容超过浏览器窗口的高度。

如果我点击“OM OSS”，则会出现问题，因为内容更多。我一直在谷歌和每个论坛上搜索过去2天的解决方案，但我找不到解决方案。我需要某种javascript或其他东西吗？

Answer 1

看一下这个例子：

HTML

<div>
    <div></div>
</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
}
div {
    width: 100%;
    min-height:100%;
    background: blue;
}
div div {
    width: 20%;
    height: 3000px;
    background: red;
}

内置div：

DEMO HERE

内部没有div：

DEMO HERE

您可以移除内部div以查看其反应方式。整个浏览器屏幕都有背景。这是因为使用了min-height: 100%;

Answer 2

发布我发现修复它的内容太简单了，不会教你任何东西。在你的包装里面有一个高度为100％的元素。找出这个元素和相对于100％的元素。理解后，从该元素中删除100％并解决问题

Answer 3

从height:100%和background移除#left和#right。将此代码添加到您的css：

#wrapper{
    position:relative;
    oveflow:hidden;
}
#wrapper:before{
    content:'';
    position:absolute;
    background:#000;
    background:rgb(26,26,26); 
    background: rgba(26,26,26, .85);
    border-right:670px #313030 solid;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width:100%;
    height:100%;
    z-index:-1;
    top:0;
    left:0;
}

Answer 4

最好设置最小高度，使其最小为100％，然后根据需要进行扩展。

body {
    min-height: 100%; 
}

但这并不是什么让你烦恼，你有很多未清除的浮动元素。我尝试通过移除所有浮动并设置“min-height”并根据您的需要扩展主体。

P.S。：问题并非来自你对元素进行大小调整的方式，即使有些很奇怪。使用检查器试一试。

具有100％高度的正文和html不会随着子div的扩展而扩展

4 个答案:

HTML

CSS：