如何设置CSS 让页面头部和底部固定 中间内容滚动?
就是头部贴页面顶部，底部贴页面底部。全屏的时候，刚好页面是没有滚动条的。当页面缩小的时候，头部和底部还是固定在两头，让中间部分产生滚动条。页面分成了三个部分，三个部分分开...
就是头部贴页面顶部，底部贴页面底部。全屏的时候，刚好页面是没有滚动条的。
当页面缩小的时候，头部和底部还是固定在两头，让中间部分产生滚动条。
页面分成了三个部分，三个部分分开写在不同的页面里，然后调用。整体是这样的模式：
<div>
<% Html.RenderPartial("HeadUserControl"); %>
</div>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div>
<% Html.RenderPartial("FootUserControl"); %>
</div>
怎麼弄也弄不好，朋友们救救命啊！先谢谢了！ 展开
当页面缩小的时候，头部和底部还是固定在两头，让中间部分产生滚动条。
页面分成了三个部分，三个部分分开写在不同的页面里，然后调用。整体是这样的模式：
<div>
<% Html.RenderPartial("HeadUserControl"); %>
</div>
<div>
<asp:ContentPlaceHolder ID="MainContent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div>
<% Html.RenderPartial("FootUserControl"); %>
</div>
怎麼弄也弄不好，朋友们救救命啊！先谢谢了！ 展开
6个回答
展开全部
底部和头部分别定义两个div，在利用position:fixed;分别设置它们的位置。
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
fixed
生成绝对定位的元素，相对于浏览器窗口进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
I服了楼上的YOU们！
<style type="text/css">
<!--
html,body {height: 100%;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top,.bottom {
position: absolute;
width: 100%;
left: 0px;
height: 10%;
background-color: #000000;
}
.top {top: 0px;}
.bottom {bottom: 0px;}
.main {
background-color: #00CC66;
overflow-y: scroll;
position: absolute;
top: 10%;
bottom: 10%;
height: 80%;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="main">CONT</div>
</body>
如果你要固定高度，将10%转换一下数值就可以了。具体的CSS写法忘了，你去查查了。
<style type="text/css">
<!--
html,body {height: 100%;}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.top,.bottom {
position: absolute;
width: 100%;
left: 0px;
height: 10%;
background-color: #000000;
}
.top {top: 0px;}
.bottom {bottom: 0px;}
.main {
background-color: #00CC66;
overflow-y: scroll;
position: absolute;
top: 10%;
bottom: 10%;
height: 80%;
width: 100%;
}
-->
</style>
</head>
<body>
<div class="top">TOP</div>
<div class="bottom">BOTTOM</div>
<div class="main">CONT</div>
</body>
如果你要固定高度，将10%转换一下数值就可以了。具体的CSS写法忘了，你去查查了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
}
.top{
position:fixed;
left:0;
top:0;
height:100px;
width:100%;
background:#000;
}
.main {
background-color: #00CC66;
height: 1000px;
margin-top:100px;
margin-bottom:100px;
padding-bottom:20px;
width: 100%;
}
.bottom{
position:fixed;
left:0;
bottom:0px;
height:100px;
width:100%;
background:#000;
}
/*IE6 fixed bug*/
* html{overflow:hidden;}
* html body{overflow:auto;margin:0;}
* html .bottom{position:absolute;left:0;bottom:0px;}
* html .top{position:absolute;left:0;top:0px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="top">TOP</div>
<div class="main">
CONT
CONT
CONTCONT
CONT
CONT
CONT
<div style="margin-top:980px;color:#fff;">底部</div>
</div>
<div class="bottom">BOTTOM</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!--
body {
margin:0;
padding:0;
}
.top{
position:fixed;
left:0;
top:0;
height:100px;
width:100%;
background:#000;
}
.main {
background-color: #00CC66;
height: 1000px;
margin-top:100px;
margin-bottom:100px;
padding-bottom:20px;
width: 100%;
}
.bottom{
position:fixed;
left:0;
bottom:0px;
height:100px;
width:100%;
background:#000;
}
/*IE6 fixed bug*/
* html{overflow:hidden;}
* html body{overflow:auto;margin:0;}
* html .bottom{position:absolute;left:0;bottom:0px;}
* html .top{position:absolute;left:0;top:0px;}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
</head>
<body>
<div class="top">TOP</div>
<div class="main">
CONT
CONT
CONTCONT
CONT
CONT
CONT
<div style="margin-top:980px;color:#fff;">底部</div>
</div>
<div class="bottom">BOTTOM</div>
</body>
</html>
参考资料： http://www.losever.com/?s=div%2Bcss
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
DIV做这样的要配合JS，你用框架集做吧！效果一样的，你搜frameset ！
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
页面头部和底部的css样式用 position:fixed;
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
