Question

我希望.Bck div延伸到浏览器窗口的完整高度。我尝试过使用jQuery，但是当我调整窗口大小时，高度并没有相应调整。我的javascript有什么问题，是否可以仅使用CSS执行此操作？

<!-- language-all: lang-html -->
    <!DOCTYPE html>
    <head>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <script src="http://www.iconight.it/js/jquery1_11_0.js"></script>
    <script>
    `window.jQuery`(document).ready(function(){
        `window.jQuery`('.Bck').css('height', `window.jQuery`(document).height());
    });
    `window.jQuery`(window).bind("resize", function(){
        `window.jQuery`('.Bck').css('height', `window.jQuery`(document).height());
    });
    </script>
    <style>
    body {
        margin: 0px;
        font-family: arial;
        font-size: 13px;
        background: #000     url("http://fc01.deviantart.net/fs15/i/2007/059/3/7/Drawing_Surface_Paper_Texture_by_Enchantedgal_Stock.jpg");
        color: #FFF;
    }
    .Bck {
        background-image: radial-gradient(ellipse at center, transparent -100%, #000 100%);
        height: 100%;
    }
    #Section{
        text-align: center;
        width: 100%;
        margin: 0px auto;
    }
    #Footer {
        text-align: center;
        padding: 50px 0px;
        width: 100%;
        overflow: hidden;
        margin: 0px auto;
        position: absolute;
        bottom: 0px;
    }
    </style>
    <head>
    <body>
        <div class='Bck'>
            <div id='Section'>Hello world</div>
            <div id='Footer'>aaa</div>
        </div>
    </body>
    </html>

Answer 1

删除Javascript。然后，将100％的高度设置为＆＃39; html＆＃39;和＆＃39;身体＆＃39; CSS上的标签：

html, body {
    height: 100%;
}

Answer 2

尝试使用vh单位：

.bck {
    height: 100vh;
}

查看实际操作： http://jsfiddle.net/bu0qps4s/1/

关于您的代码的一些注意事项：

标准实际上是小写的id和类名（所以“bck”而不是“Bck”）
@ 01dskoo1在他建议您重置html和body标签时是正确的。有关通过重置您的CSS来摆脱浏览器特性的信息，请查看here。我不认为它现在会给你带来麻烦。
您的javascript有一些问题：
1. 如上所述，“window.jQuery在ECMAScript 6中生成一个字符串，或者在以前的版本中出现语法错误。所以你不能调用它。” （感谢@Oriol）。您window.jQuery的所有内容都可以仅用$替换（所以$(document).ready()）
2. 您的bind语句应位于$(document).ready内，以便在您绑定的元素存在于文档中时对其进行评估。
3. 在jQuery中bind已弃用，您应该使用on

更新：要解决您.Bck div中包含大量内容的问题，您应该更改溢出设置，以便.Bck正在处理它而不是<body>（我也更新了小提琴）：

body {
    overflow: hidden;
}
.bck {
    overflow: auto;
}

如何使用样式表将元素高度设置为等于窗口高度？

2 个答案: