DIV - 力量高度100%= /页面高度?
我正在尝试设置一个设计,这是一个很大的问题。这里是供参考的网站;DIV - 力量高度100%= /页面高度?
http://throwbackhero.com/index1.php
的问题是,我设置身体高度:100%;在样式表和#wrapper div中。高度超出当前页面高度,并且不考虑可能导致溢出的其他div。
我想,即使浏览器的垂直尺寸发生变化,空白页面也会成为浏览器的大小,但内容/包装div会收缩。
可以这样做吗?
编辑
好了,所以显然我原来的问题是极其混乱。这是一张图片;
因此,在图一(左)是问题。身高100%;在包装和内容的div,它创造了这个坏男孩。我希望它看起来像图片,其中白色/灰色区域根据浏览器的大小增长/收缩...
尝试使用min-height:100%
来解决您的问题。 (尽管我没有完全理解你的问题;))
将overflow:auto
加到wrapper
元素。
给身体,HTML &主DIV height 100%
。像这样写:
body,html{height:100%;}
.parent{
min-height:100%;
width:400px;
margin:0 auto;
background:red;
}
好吧,这是好的,直到我们得到第二个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";
最简单的方法就是使用CSS:
height: 100vh;
在哪里VH '代表浏览器窗口的垂直高度。 响应浏览器和移动设备的大小调整。
保存我的屁股!在每个现代移动设备和非浏览器中得到很多支持! +1 – 2016-04-20 11:29:30
如果您可以在网页上每毫秒运行一段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);
当然,这是假定白色框上方的内容将总是相同的大小,不管窗口的字体或操作系统或大小。
我自己实际上没有测试过这个,但是这个概念应该可行。注意那些说明在哪里放置一些信息的评论。
你的问题确实含糊不清。你的意思是#wrapper是浏览器的大小吗? – SMacFadyen 2012-03-16 09:43:25
[CSS 100%height with padding/margin]可能的重复(http://*.com/questions/485827/css-100-height-with-padding-margin) – 2012-03-16 09:48:12