一个测试有3个部分，其中第一部分必须大如浏览器窗口的jQuery和Javascript

A test of 3 sections, where the first must the big as the browser window jQuery and Javascript

本文关键字：一部分 浏览器 窗口 Javascript jQuery 第一部 一个 测试 3个      更新时间：2023-09-26

EDIT:通过在页面顶部书写Doctype -来解决"& lt;!DOCTYPE html>"(标签之间没有空格<，>和其他字符)

我正在做一个包含四个部分的页面的测试。第一个参数必须是浏览器窗口的高度。因此，为了做到这一点，我测试了jQuery和Javascript代码。但是，虽然JS-pure代码可以工作，但jQuery的代码却不行。代码如下:

jQuery: 

$("section:first").css("min-height", $(window).height());
$(window).resize(function() {
    $("section:first").css("min-height", $(window).height());
});
Javascript: 

var first = document.getElementsByTagName("section")[0];
first.style.minHeight = window.innerHeight + "px";
window.onresize = function() {
    first.style.minHeight = window.innerHeight + "px";
}

我有一个iMac 1920x1080和我的Chrome浏览器的高度是896px，但如果我尝试使用jQuery代码(这不会得到控制台错误!)，最小高度数将通过调整窗口大小(向上或向下)的高度(总是向上)和其他部分的基数增长。有人知道为什么吗?

有HTML和CSS:

body {
    margin: 0;
    background-image: url("images/bg.jpg");
    background-repeat: repeat;
    background-position: center;
    background-attachment: fixed;
    background-size: 713px 518px;
}
.content {
    background-color: #FFF;
}
.internal {
    position: relative;
    padding: 1% 20px;
    margin: 0 auto;
    border-bottom: 1px solid #21D561;
}

<section> Some content here </section>
<section class="content">
   <div class="internal">
     <p>Here a big Lorem Ipsum in eight paragraphs</p>
   </div>
</section>
<section class="content">
   <div class="internal">
     <p>Here a big Lorem Ipsum in six paragraphs</p>
   </div>
</section>
<section class="content">
   <div class="internal">
     <p>Here a big Lorem Ipsum in six paragraphs</p>
   </div>
</section>

您可以在这里看到错误的结果:http://syrafiles.esy.es/learning/Static_Section/

在你的纯JS中你写:

var first = document.getElementsByTagName("section")[0];
first.style.minHeight = window.innerHeight + "px";
window.onresize = function() {
    first.style.minHeight = window.innerHeight + "px";
}

而忽略+ "px":

$("section:first").css("min-height", $(window).height());
$(window).resize(function() {
    $("section:first").css("min-height", $(window).height());
});

试试相反:

$("section:first").css("min-height", $(window).height() + "px");
$(window).resize(function() {
    $("section:first").css("min-height", $(window).height() + "px");
});

.height()只返回一个整数，您还需要在这里添加+ "px"，就像您在纯JS中做的那样

相关文章：