gpt4 book ai didi

javascript - 为什么窗口高度没有调整到页面上最高元素的高度以下?

转载 作者:行者123 更新时间:2023-11-28 20:40:19 25 4
gpt4 key购买 nike

好吧,我有一个特殊的情况,首先我要创建 10 <li>使用 jQuery append() 。然后我调整每个 <li> 的高度为窗口高度/10,以便它们作为一个整体填充整个屏幕高度。我的 html 只包含 <div class="wrapper"></div> 。这是我的js:

// Create The Tree:

$('.wrapper').append('<ul>');
for (var x = 1; x <= 10; x++)
{
$('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
}

// Script The Tree:

var $winHeight = document.documentElement.clientHeight;
console.log($winHeight);
var $liNumber = $('.wrapper > ul > li').size();
var $liHeight = $winHeight / $liNumber;
$('.wrapper > ul > li').css('height', $liHeight);

var $win = $(window)
$win.on('resize', update);
function update () {
console.log(document.documentElement.clientHeight);
}

我的问题是,如果您查看控制台,您会发现它没有准确更新窗口的高度。当您调整窗口大小时,它记录的值不会低于您上次刷新页面时的值!

最佳答案

你是这个意思吗? http://jsfiddle.net/reKSm/2/

var n = 20

$(document).ready(function (){
$('.wrapper').append('<ul>');
for (var x = 1; x <= n; x++)
$('.wrapper > ul').append('<li>Root Option ' + x + '</li>');

update_size();

$(window).resize(function(){
update_size();
});
});

function update_size(){
// Script The Tree:
var $winHeight = $(window).height();
var $liNumber = $('.wrapper > ul > li').length;
var $liHeight = $winHeight / n;
$('.wrapper > ul > li').css('height', $liHeight + 'px');
};

此外,您必须定义doctype。地点<!doctype html>在你的 html 文件的开头,它就会起作用。

并且也不要将上层 JS 代码放入另一个 $(document).ready() 函数中。里面已经有一个了:)

关于javascript - 为什么窗口高度没有调整到页面上最高元素的高度以下?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14531635/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com