题
在 Web 应用程序中,我有一个页面,其中包含一个 DIV,该 DIV 具有自动宽度,具体取决于浏览器窗口的宽度。
我需要对象的自动高度。DIV 从距顶部屏幕约 300 像素的位置开始,其高度应使其延伸到浏览器屏幕的底部。我有容器 DIV 的最大高度,因此 div 必须有最小高度。我相信我可以在 CSS 中限制它,并使用 Javascript 来处理 DIV 的大小调整。
我的 javascript 还没有达到应有的水平。我可以编写一个简单的脚本来为我做到这一点吗?
编辑:DIV 包含一个控件,该控件执行自己的溢出处理(实现自己的滚动条)。
解决方案
试试这个简单、具体的函数:
function resizeElementHeight(element) {
var height = 0;
var body = window.document.body;
if (window.innerHeight) {
height = window.innerHeight;
} else if (body.parentElement.clientHeight) {
height = body.parentElement.clientHeight;
} else if (body && body.clientHeight) {
height = body.clientHeight;
}
element.style.height = ((height - element.offsetTop) + "px");
}
它不依赖于当前指定的距主体顶部的距离(如果您的 300px 发生变化)。
编辑:顺便说一句,每次用户更改浏览器的大小时,您都希望在该 div 上调用此函数,因此您当然需要为此连接事件处理程序。
其他提示
溢出的情况下应该怎么办?如果您希望它只到达窗口底部,请使用绝对定位:
div {
position: absolute;
top: 300px;
bottom: 0px;
left: 30px;
right: 30px;
}
这将使 DIV 距离每边 30 像素,距离屏幕顶部 300 像素,并与底部齐平。添加一个 overflow:auto;
处理内容大于 div 的情况。
编辑:@无论谁把这个记下来,解释一下就好了......答案有问题吗?
document.getElementById('myDiv').style.height = 500;
这是动态调整对象高度所需的非常基本的 JS 代码。我刚刚做了这件事,我有一些自动高度属性,但是当我通过添加一些内容时 XMLHttpRequest
我需要调整我的父 div 的大小,这个 offsetheight 属性在 IE6/7 和 FF3 中做到了这一点
DIV 包含一个可以进行自己的溢出处理的控件。
如果我明白你在问什么,这应该可以解决问题:
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use
// window.innerWidth and window.innerHeight
var windowHeight;
if (typeof window.innerWidth != 'undefined')
{
windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0)
{
windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}
document.getElementById("yourDiv").height = windowHeight - 300 + "px";
稍加修正:
function rearrange()
{
var windowHeight;
if (typeof window.innerWidth != 'undefined')
{
windowHeight = window.innerHeight;
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first
// line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth != 'undefined'
&& document.documentElement.clientWidth != 0)
{
windowHeight = document.documentElement.clientHeight;
}
// older versions of IE
else
{
windowHeight = document.getElementsByTagName('body')[0].clientHeight;
}
document.getElementById("foobar").style.height = (windowHeight - document.getElementById("foobar").offsetTop - 6)+ "px";
}
我能想到的最简单的...
function resizeResizeableHeight() {
$('.resizableHeight').each( function() {
$(this).outerHeight( $(this).parent().height() - ( $(this).offset().top - ( $(this).parent().offset().top + parseInt( $(this).parent().css('padding-top') ) ) ) )
});
}
现在您所要做的就是将 ressizedHeight 类添加到您想要自动调整大小的所有内容(添加到其父级)。
受到@jason-bunting的启发,高度或宽度都是一样的:
function resizeElementDimension(element, doHeight) {
dim = (doHeight ? 'Height' : 'Width')
ref = (doHeight ? 'Top' : 'Left')
var x = 0;
var body = window.document.body;
if(window['inner' + dim])
x = window['inner' + dim]
else if (body.parentElement['client' + dim])
x = body.parentElement['client' + dim]
else if (body && body['client' + dim])
x = body['client' + dim]
element.style[dim.toLowerCase()] = ((x - element['offset' + ref]) + "px");
}