DIV - 强制高度为100%，与页面高度不相等？

Question

DIV - 强制高度为100%，与页面高度不相等？

csshtmlheight

8

我在设置一个设计时遇到了一些问题。这是网站的参考链接：

http://throwbackhero.com/index1.php

问题在于我在样式表和#wrapper div中都将body设置为height: 100%。高度超出了当前页面高度，没有考虑其他可能导致溢出的div。

我希望，即使浏览器的垂直大小改变，一个空白页面也能够与浏览器一样大，内容/包装div会收缩以适应。

可以做到这一点吗？

编辑

好的，显然我的原始问题非常令人困惑。这是一张图片；

因此，图1（左侧）是问题所在。在包装器和内容div上使用高度100％会创建那个糟糕的东西。我希望它看起来像图片，其中白色/灰色区域根据浏览器的大小而增长/缩小...

- Konzine

你的问题非常模糊。您是否意思是 #wrapper 的大小与浏览器相同？ - SMacFadyen

可能是CSS 100%高度与填充/边距的重复问题。 - Mahmoud Gamal

6个回答

11

给body、HTML和主要的DIV设置height 100%。写成这样：

body,html{height:100%;}

.parent{
    min-height:100%;
    width:400px;
    margin:0 auto;
    background:red;
}

请查看此http://jsfiddle.net/3VUGt/

- sandeep

1

好的，这很好，直到我们涉及第二个div，http://jsfiddle.net/3VUGt/5/。试试看。你看到它如何创建一个溢出问题，而不仅仅是页面高度的100％吗？我想避免这种情况。 - Konzine

1

@sandeep的答案是正确的。在浏览器中控制最基本的显示容器的最佳方法是控制html/body。

通常，我需要与您设计相同的结构： 1. 内容应保持在容器内，不会出现溢出滚动条， 2. 当浏览器调整大小时，容器应调整为100%。

因此，实现它的基本方法是：

html, body {
    height: 100%;
}

我总是将基本容器设置为适合高度和宽度：

html, body {
    width: 100%;
    height: 100%;
}

注意：一些浏览器可能存在边距/填充问题（如用户代理样式表），默认情况下为某些基本组件添加样式（例如Chrome 70.0.3538.102）：

body {
    display: block;
    margin: 8px;
}

在开发者模式下检查，如果出现这种情况，请添加边距覆盖，这也适用于填充：

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

如果您的页面基础组件如下：

<body>
    <div id="div1">
        my html content ...
    </div>
</body>

您可以这样做：

您只需执行：

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

#div1 {
    position: absolute;
    width: 100%;
    height: 100%;
}

这个方法对我总是有效的。希望它有所帮助。下面是我猜测你想要达到的目标。

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

#div1 {
  position: relative;
  width: 60%;
  height: 100%;
  background-color: rgb(255,125,125);
  float: left;
}

#div2 {
  position: relative;
  width: 40%;
  height: 100%;
  background-color: rgb(125,255,125);
  float: left;
}

<div id="div1"> layer 1 </div>
<div id="div2"> layer 2 </div>

- DeadlYBlinder

0

将overflow:auto添加到wrapper元素中。

- MakuraYami

0

这个问题目前没有完整的CSS解决方案。这个CSS“问题”已经被知晓多年了。由于CSS在这些年里不断增强功能，我认为可能现在已经有完整的CSS解决方案了。但遗憾的是，还没有。我尝试了很多方法，搜索了很多，但问题仍然存在。

据我所知，只有三种解决方案不需要第三方库：绝对定位、伪列（两色重复背景）和JS。

我只喜欢伪列和JS这两种解决方案。我更喜欢JS解决方案，因为它更多地使用了CSS。使用JS时，如果您想稍后更改列宽或颜色，您不必重新设计背景图片。这是一种更适应和可重用的解决方案。我唯一能看到创建伪列的优势是，如果客户端禁用JS，则不会破坏您的布局。

JS解决方案（无需包装器）: https://jsfiddle.net/Kain52/uec9cLe4/

var side1 = document.getElementsByTagName('main')[0];
var side2 = document.getElementById('mainMenu');
var side1Height = side1.clientHeight;
var side2Height = side2.clientHeight;
if(side2Height < side1Height) { side2.style.height = side1Height + "px"; }
else { side1.style.height = side2Height + "px"; }

JS解决方案（需要包装器）：https://jsfiddle.net/Kain52/7udh55zq/

var wrapperHeight = document.getElementById('innerWrapper').clientHeight;
document.getElementsByTagName('main')[0].style.height = wrapperHeight + "px";
document.getElementById('mainMenu').style.height = wrapperHeight + "px";

解释：如果您使用 div 包装器，则可以将其分配给包装器的高度。如果您不使用包装器，则可以将最短边的高度设置为最长边的高度。如果您知道侧边菜单栏始终比内容短，则只需要两行代码：

var contentHeight = document.getElementsByTagName('main')[0].clientHeight;
document.getElementById('mainMenu').style.height = contentHeight + "px";

- XSapien

-1

如果您可以接受每毫秒在页面上运行一些JavaScript，并且问题白色区域上方的内容始终具有相同的像素高度，那么您可以尝试类似于以下内容的解决方案...

bodyLeadingFill = // put the size taken up by everything above the white div,
                  // including margin, padding, border, etc
function resizeElement(){
    document.getElementById(/* name of white element here */).style.height = (window.innerHeight - bodyLeadingFill) * (/* put the % size you need here */ / 100) + "%";
}
window.setTimeout(resizeElement, 0);

当然，这是建立在白色框上方的内容无论字体、操作系统或窗口大小都保持相同大小的前提下。

我自己并没有测试过，但这个概念应该是可行的。请留意注释，指出需要放置一些信息的位置。

- MineAndCraft12

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- alchuang · Accepted Answer

最简单的方法就是使用CSS：

height: 100vh;

'vh' 代表浏览器窗口的垂直高度。可响应浏览器和移动设备的大小调整。