怎么让header和footer固定在顶部和底部，中间wrapper可以滚动，不能用position:fixed,用jquery怎么写？

<!doctypehtml><html><head><metacharset="utf-8"><title></title><metaname="viewport"con... <!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
</head>
<style>
*{ padding:0; margin:0; list-style:none;}
.header{ height:40px; width:100%; background:#0CC;}
.wrapper{ min-width:320px; max-width:640px; margin:0 auto; background:#CCC; height:1000px; overflow-x:hidden; overflow-y:auto;}
.footer{ height:40px; width:100%; background:#09C;}
</style>

<body>
<div class="header"></div>
<div class="wrapper"><h3>无内容</h3></div>
<div class="footer"></div>
<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script>
$(function(){
autoSizeHeight();
$(window).resize(autoSizeHeight);
});

// 高度自适应
function autoSizeHeight(winH){
var footerH = 0;
var winH = $(window).height();
if( $(".wrapper > .footer").length != 0){
footerH = $(".footer").outerHeight(true);
}
// 滚动区域
if( $(".wrapper").length != 0 ){
var _top = $(".wrapper").offset().top;
$(".wrapper").height( winH - _top - footerH );
}
}
</script>
</body>
</html> 展开

 我来答

1个回答

#热议# 生活中有哪些实用的心理学知识？

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

怎么让header和footer固定在顶部和底部，中间wrapper可以滚动，不能用position:fixed,用jquery怎么写？

其他类似问题

为你推荐：