jQuery min-height的截面等于windows高度
[英]jQuery min-height of section equal to windows height
问题描述
我正在尝试将每个部分的最小高度设置为窗口的高度。 这是当前的代码......
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');
})
});
3 个解决方案
解决方案1
3 已采纳 2014-06-28 23:08:11
这是一个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
解决方案2
1 2014-06-28 22:33:20
改变:到,
试试这个：
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");
})
});
解决方案3
0 2014-06-28 22:52:38
嗨你不需要那个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 css min-height
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.