Question

好的，我有一个独特的情况，首先我使用jQuery <li>创建10个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);
}

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

Answer 1

我的代码中没有看到任何PX，所以我想：

var $liNumber = $('.wrapper > ul > li').length;  // jquery.size() is deprecated (1.8)
var $liHeight = $winHeight / $liNumber;
$('.wrapper > ul > li').css('height', $liHeight + 'px');

为了更新窗口大小调整，你必须在调整大小时调用更新函数...实际上有这个函数而不是console.log（）：

var n = 20

$(document).ready(function (){
    // Update when window resized
    $(window).on('resize', update);
    // Add <ul> & <li>
    $('.wrapper').append('<ul>');
    for (var x = 1; x <= n; x++)
        $('.wrapper > ul').append('<li>Root Option ' + x + '</li>');
    // Update once
    update();
});

function update () {
    var $winHeight = document.documentElement.clientHeight;
    var $liNumber = $('.wrapper > ul > li').length;
    var $liHeight = $winHeight / n;
    $('.wrapper > ul > li').css('height', $liHeight + 'px');
}

在jsfiddle预览：http://jsfiddle.net/reKSm/1/

Answer 2

我对您的格式和结构进行了一些修改，但我相信这符合您的所有需求。 http://jsfiddle.net/ZBwa2/

//Default, global values.
var numLi = 10;

$(document).ready(function(){

  // Create The Tree:
    $('.wrapper').append('<ul />');        
    for (var x = 1; x <= numLi; x++) {
        $('.wrapper > ul').append('<li class="option">Root Option ' + x + '</li>');
    }

  // Call the update function on doument ready and window resize
    update();
    $(window).on('resize', update);
});

function update () {
    var $winHeight = document.documentElement.clientHeight,
        $liHeight = $winHeight / numLi;

    $('.wrapper .option').css('height', $liHeight);

    console.log(": Window Resized :");
    console.log("Window Height = "+$winHeight);
    console.log("Li Height = "+$liHeight);
}

Answer 3

你是说这个意思吗？ 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（）函数中。已经有一个：）

为什么窗口高度不能调整到页面最高元素的高度以下？

3 个答案: