2

我是 html 的初学者，所以这可能是一个简单/愚蠢的问题 ;-)

对于一个有趣的项目，我想要一个 html 页面，它占据窗口的整个高度但不滚动。（例如，我总是想在不使用静态定位的情况下查看页脚）。

如果内容多于无法显示的内容，则嵌套的 div 应滚动。由于该站点将有 2 列，因此应有 2 个可能的滚动条。

我创建了一个小例子来更好地解释这个问题：

HTML：

<body>
    <div id="sitepage">
        <div id="header" class="box">testtitle</div>
        <div id="dynamiccontent">
            <div id="leftside" class="box">
                <div id="navheader">little navigation</div>
                <div id="scrolleftcolumn" class="scrollcontainer">
                    <div id="forumandthreadlist">
                        <div class="forumslist selectable hoverable innerbox">textasfasdfds</div>
                    </div>
                </div>
            </div>
            <div id="rightside">
                <div class="box" id="navcontent">navigation hereasdfa sdfasd fsad sad fasd fasd fasdf asdf sd</div>
                <div
                id="scrollrightcolumn" class="scrollcontainer">
                    <div id="content">
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                        <div class="box">another post</div>
                    </div>
                    <div id="editor" class="box">post reply + editor + preview</div>
            </div>
        </div>
    </div>
    </div>
</body>

CSS：

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#header {
}
#dynamiccontent {
}
#leftside {
    position: absolute;
    left: 0;
    right: 75%;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}

JsFiddlelink 基本上：如何在“scrollcontainer”类上启用垂直滚动？甚至可以在液体布局中使用吗？

注意：我知道“溢出：自动；”。我似乎无法限制液体布局中嵌套 div 的高度以启用滚动。

4

2 回答 2

1

添加overflow:scroll;到滚动容器类，或者overflow:auto如果您只想在内容溢出时滚动。

将它们的高度设置为百分比并限制其宽度以防止水平滚动。

我会建议：

header{
    height:10%;
}
dynamiccontent{
    height:85%;
}
footer{
    height: 5%;
}

然后将左右列的高度设置为100%（动态内容的100%）

于 2013-01-29T12:30:08.147 回答
0

您需要对需要扩展以达到可用高度的孩子进行填充。

  1. #sitepage 应占据所有可用高度
  2. #dynamiccontent 应垂直放置在距顶部 {size of header}px 的位置
  3. 左右区域应占据全部可用高度。

风格：

html, body, * {
    padding: 0;
    margin: 0;
}
html {
    width: 100%;
    height: 100%;
}
#sitepage {
    position: absolute;
    top:0;
    bottom: 0;
    left: 0;
    right: 0;
}
#header {
}
#dynamiccontent {
    top: 30px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
#leftside {
    position: absolute;
    left: 0;
    top:0;
    right: 75%;
    bottom: 0;
}
#rightside {
    position: absolute;
    left: 25%;
    right: 0;
    bottom: 0;
    overflow: auto;
    top:0;
}
div.box, .innerbox {
    margin: 5px;
}
div.box {
    background-color: #1c3c41;
}
div.innerbox {
    background: #274850;
    color: #C9C9C9;
}
于 2013-01-29T12:54:24.897 回答