Question

我想要一个类似于帧的行为，我有一个标题（非滚动），页脚停留在底部（非滚动），在中间有两个垂直div。如果这些div中的内容对于窗口来说太长，它们应该显示自己的滚动条 - 即 - 身体本身没有滚动条。我无法弄清楚如何使div的宽度为：current-window-size - （footer + header）。有没有办法单独使用CSS？（浏览器支持需要IE9 +）

HTML

<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

Answer 1

为什么不使用语义 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%;
}

Answer 2

我不知道在没有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>

希望它有所帮助;）

Answer 3

你可以用css ...

来做到这一点

#pane-1, #pane-2 {
  width: 200px;
  height: 200px;
  overflow: scroll;
}

根据您的需要，您可能还喜欢使用css属性：max-height代替高度。

滚动中心的框架式行为

3 个答案: