DIV - 力量高度100％= /页面高度？

我正在尝试设置一个设计，这是一个很大的问题。这里是供参考的网站;DIV - 力量高度100％= /页面高度？

http://throwbackhero.com/index1.php

的问题是，我设置身体高度：100％;在样式表和#wrapper div中。高度超出当前页面高度，并且不考虑可能导致溢出的其他div。

我想，即使浏览器的垂直尺寸发生变化，空白页面也会成为浏览器的大小，但内容/包装div会收缩。

可以这样做吗？

编辑

好了，所以显然我原来的问题是极其混乱。这是一张图片;

因此，在图一（左）是问题。身高100％;在包装和内容的div，它创造了这个坏男孩。我希望它看起来像图片，其中白色/灰色区域根据浏览器的大小增长/收缩...

来源

2012-03-16 Konzine

你的问题确实含糊不清。你的意思是#wrapper是浏览器的大小吗？ – SMacFadyen 2012-03-16 09:43:25

[CSS 100％height with padding/margin]可能的重复（http://stackoverflow.com/questions/485827/css-100-height-with-padding-margin） – 2012-03-16 09:48:12

尝试使用min-height:100%来解决您的问题。（尽管我没有完全理解你的问题;））

来源

2012-03-16 09:46:30 Christoph

将overflow:auto加到wrapper元素。

来源

2012-03-16 09:52:19 MakuraYami

给身体，HTML &主DIV height 100%。像这样写：

body,html{height:100%;} 

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

入住这http://jsfiddle.net/3VUGt/

来源

2012-03-16 09:55:12 sandeep

好吧，这是好的，直到我们得到第二个div涉及，http://jsfiddle.net/3VUGt/5/。试试看。看看它是如何造成溢出问题，而不仅仅是页面高度的100％？我想避免这种情况。 – Konzine 2012-03-16 10:44:41

没有针对此问题没有完整的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";

来源

2015-08-08 03:08:50 XSapien

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

height: 100vh;

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

来源

2015-10-13 03:43:24 alchuang

保存我的屁股！在每个现代移动设备和非浏览器中得到很多支持！ +1 – 2016-04-20 11:29:30

-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);

当然，这是假定白色框上方的内容将总是相同的大小，不管窗口的字体或操作系统或大小。

我自己实际上没有测试过这个，但是这个概念应该可行。注意那些说明在哪里放置一些信息的评论。

来源

2015-10-28 02:15:22 MineAndCraft12

DIV - 力量高度100％= /页面高度？

回答

相关问题