Question

我试图将每个部分的最小高度设置为窗口的高度。这是当前的代码......

HTML

<section id="hero">

</section>

<section id="services">

</section>

<section id="work">

</section>

的jQuery

jQuery(document).ready(function() {
$("#hero").css('min-height':($(window).height())+'px');
$(window).resize(function() {
    $("#hero").css('min-height':($(window).height())+'px');
});
$("#services").css('min-height':($(window).height())+'px');
$(window).resize(function() {
    $("#services").css('min-height':($(window).height())+'px');
});
$("#work").css('min-height':($(window).height())+'px');
$(window).resize(function() {
    $("#work").css('min-height':($(window).height())+'px');
})
});

Answer 1

这是 FIDDLE

$(function() {
  $("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
  $(window).resize(function() {
    $("#hero").css({ minHeight: $(window).innerHeight() + 'px' });
  });
  $("#services").css({ minHeight: $(window).innerHeight() + 'px' });
  $(window).resize(function() {
    $("#services").css({ minHeight: $(window).innerHeight() + 'px' });
  });
  $("#work").css({ minHeight: $(window).innerHeight() + 'px' });
  $(window).resize(function() {
    $("#work").css({ minHeight: $(window).innerHeight() + 'px' });
  });
});

或更短的版本

$(function() {
  $("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
  $(window).resize(function() {
    $("#hero, #services, #work").css({ minHeight: $(window).innerHeight() + 'px' });
  });
});

可以使用jQuery CSS，例如

$("#element").css( minHeight, $(window).innerHeight() + 'px' ); // When you target single property

或

$("#element").css({ minHeight: $(window).innerHeight() + 'px' }); // When you target single or multiple properties comma delmited

您也可以使用'min-height'或minHeight

Answer 2

将:更改为,

试试这个：

jQuery(document).ready(function () {
$("#hero").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
    $('#hero').css("min-height", $(window).height() + "px");
});
$("#services").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
    $('#services').css("min-height", $(window).height() + "px");
});
$("#work").css('min-height': ($(window).height()) + 'px');
$(window).resize(function () {
    $('#work').css("min-height", $(window).height() + "px");
})
});

Answer 3

您好，您不需要那个jquery，只需要css，请看这里：http://jsbin.com/filoru/3

CSS：

section {
  width:33%%;
  float:left;
  display:block;

  height:100%
}
html, body {
  height:100%;
  padding : 0;
  margin:0;

}
#hero {
  background-color:red;
}
#services {
  background-color:green;
}
#work {
  background-color:orange;
}

HTML：

<body>
  <section id="hero">
hero
</section>

<section id="services">
service
</section>

<section id="work">
work
</section>

</body>
</html>

jQuery min-height的截面等于windows高度

3 个答案: