javascript - jQuery的min-height部分等于Windows的高度

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

的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');
})
});

最佳答案

这是 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