Question

我在这里遇到了一个很大的问题，我想设置一个设计。这是一个参考网站;

http://throwbackhero.com/index1.php

问题是我将身体设置为高度：100％;在样式表和#wrapper div中也是如此。高度偏离当前页面高度，并没有考虑到其他div可能导致溢出。

我想，即使浏览器的垂直大小发生变化，空白页面也是浏览器的大小，内容/包装器div将缩小以适应。

可以这样做吗？

修改

好的，我的原始问题非常令人困惑。这是一张照片;

因此，在图1中（左侧）是问题。高度100％;在包装器和内容div上，它正在创造那个坏孩子。我希望它看起来像图片，白色/灰色区域根据浏览器的大小增长/缩小......

Answer 1

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

height: 100vh;

哪里＆＃39; vh＆＃39;表示浏览器窗口的垂直高度。响应调整浏览器和移动设备的大小。

Answer 2

给予身体，HTML和＆amp;主DIV height 100%。写得像这样：

body,html{height:100%;}

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

选中此http://jsfiddle.net/3VUGt/

Answer 3

将overflow:auto添加到wrapper元素。

Answer 4

此问题没有完整的CSS解决方案。这个CSS“问题”已为人所知多年。由于CSS多年来在功能上有所增长，我认为现在可能有一个完整的CSS解决方案。但是，唉，没有。我尝试过很多东西并且搜索得很高，但问题仍然存在。

据我所知，只有3种解决方案不需要第三方库：绝对定位，人造柱（双色重复背景）和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";

Answer 5

@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>

Answer 6

如果您可以在页面上每毫秒运行一些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);

当然，这是假设白色框上方的内容总是大小相同，无论字体或操作系统或窗口大小如何。

我自己并没有真正测试过，但这个概念应该有用。请留意说明在哪里放置一些信息的评论。

DIV - 强制高度100％= / =页面高度？

6 个答案: