具有滚动中心的框架状行为
具有滚动中心的框架状行为
提问于 2014-08-07 15:09:36
我想要一个类似帧的行为，其中我有一个页眉(非滚动)，页脚停留在底部(非滚动)，在中间有两个垂直div。如果这些div中的内容对于窗口来说太长了，那么它们应该显示自己的滚动条--也就是说--身体本身没有滚动条。我不知道如何使div的宽度是:当前窗口大小-(页脚+页眉)。有办法单独使用CSS吗？(浏览器支持需要IE9+)
<body>
<header>
<p>Header here</p>
</header>
<div> Something else here</div>
<main>
<div id="pane-1" style="background-color:#eee;">
Have your own scrollbar
</div>
<div id="pane-2" style="background-color:#ccc;">
Have your own scrollbar too
</div>
</main>
<footer style="background-color: #FFC;"> Footer here - should not scroll</footer>
</body>CSS
html,
body {
overflow: hidden;
margin:0;
}
#pane-1,
#pane-2 {
display: inline-block;
vertical-align: top;
overflow: auto;
width: 49%;
}
footer {
height: 70px;
width:100%;
position: absolute;
bottom: 0;
}这是我的代码http://codepen.io/anon/pen/tyvAe
回答 3
Stack Overflow用户
回答已采纳
发布于 2014-08-07 15:17:04
为什么不使用语义HTML和绝对定位的魔力(注意，下面用背景色来清晰地显示各个部分)
HTML
<header></header>
<section></section>
<section></section>
<footer></footer>CSS
html, body {
height:100%;
width:100%;
margin:0;
padding:0;
}
header, footer, section {
position:absolute;
width:100%;
}
header, footer {
height:50px;
background:red;
}
footer {
bottom:0;
}
section {
width:50%;
overflow:auto;
background:blue;
top:50px;
bottom:50px;
}
section:last-of-type {
background:yellow;
left:50%;
}Stack Overflow用户
发布于 2014-08-07 15:59:40
我不知道在没有Javascript的情况下做这件事的真正好方法，但是这里是我的，尽可能少的Javascript (这个需要JQuery )：http://jsfiddle.net/g13ogq2u/2/
基本上是针对CSS的：
html {
height:100%;
width:100%;
}
body {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}
.header {
width:100%;
height: 50px;
min-height:50px;
padding:0px;
background-color:#CCAA00;
}
.page {
min-height: 100%;
height: auto !important;
/*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -70px;
/*Allow for footer height*/
vertical-align:bottom;
}
.content {
height:100%;
width:100%;
margin:0;
position:relative;
overflow:hidden;
}
.subContent {
height:100%;
width:50%;
min-height:100%;
margin:0;
float:left;
overflow:auto;
}
#subContentA {
background-color:#EEEEEE;
}
#subContentB {
background-color:#CCCCCC;
}
.pushFooter {
height: 70px;
/*Push must be same height as Footer (including its paddings) */
min-height:70px;
}
.footer {
height: 70px;
/*Push must be same height as Footer */
min-height:70px;
width:100%;
padding:0px;
margin:0px;
background-color:#FFFFCC;
position:relative;
overflow:hidden;
}小JQuery代码是：
$.fn.doFitSize = function () {
var dHeight = $(window).height();
var hHeight = $(this).prevAll().outerHeight();
var fHeight = $(this).nextAll().outerHeight();
var cHeight = dHeight - hHeight - fHeight;
$(this).height(cHeight);
}
$(document).ready(function () {
$('.content').doFitSize();
});
$(window).resize(function () {
$('.content').doFitSize();
});HTML将是：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<style type="text/css">
/* add mentioned style here */
</style>
<script src="jquery-1.9.1.js" type="text/javascript" ></script>
<script type="text/javascript">
/* add mentioned script here */
</script>
</head>
<body>
<div class="page">
<div class="header">
<span>this is the header</span>
</div>
<div class="content">
<div id="subContentA" class="subContent">
<span>This is the left content.</span>
</div>
<div id="subContentB" class="subContent">
<span>This is the right content</span>
</div>
</div>
<div class="pushFooter"></div>
</div>
<div class="footer">
<span>And this is the footer</span>
</div>
</body>
</html>希望它有帮助;)
Stack Overflow用户
发布于 2014-08-07 15:15:04
你可以用css做这个..。
#pane-1, #pane-2 {
width: 200px;
height: 200px;
overflow: scroll;
}根据您的需要，您还可以使用css属性:最大高度代替高度。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/25186008
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号