Question

我在SO上看过类似的问题，但没有一个像我想在这里做的那么简单。

使用CSS，我想将页面分成三个部分：左窗格（将有导航链接），标题栏和带滚动条的内容窗格。我事先并不知道窗口的大小，所以我想尽可能使用比例大小（例如＆＃34; 15％＆＃34;）。

我遇到麻烦的地方在于给内容窗格一个滚动条以显示其溢出（如果有的话）。我希望能够自动滚动该div，而无需移动页面的页眉或左侧导航部分。

我已经在Javascript和调整事件处理程序的帮助下看到了这种事情，但我发现很难相信它不能用简单的CSS完成......？

this jfiddle可以看到我到目前为止所得到的内容。正如您所看到的，内容窗格中的溢出会触发整个页面的scollbar，而不是像我所希望的那样单独触发内容窗格。关于如何解决这个问题的任何建议，特别是单独的CSS，将不胜感激。谢谢！

粘贴代码，如果遇到jsfiddle是个问题。 HTML：

<html>
<head>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>

<body>
<div class="layout-wrapper">
    <div class="left-pane"></div>
    <div class="right-pane">
        <div class="right-pane-header"></div>
        <div class="right-pane-content">
            <h4>Lo, a list:</h4>
            <ol>
                <li>A list item.</li>
                <li>A list item.</li>
                <li>A list item.</li>
                <!-- etc etc -->
            </ol>
        </div> <!-- right-pane-content -->
    </div> <!-- right-pane -->
</div> <!-- layout-wrapper -->

</body>
</html>

这就是CSS：

html {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
    border: 0;
    background-image: url("http://hd-wall-papers.com/images/wallpapers/hd-website-backgrounds/hd-website-backgrounds-20.jpg");
    /*overflow-y: hidden;*/
}

.layout-wrapper {
    display: table;
    width: 100%;
    min-height: 100%;
    background-image: inherit;
}

.left-pane {
    display: table-cell;
    width: 15%;
    min-height: 100%;
    background-color: #ffe0b0;
}

.right-pane {
    display: table-cell;
    width: 85%;
    height: 100%;
    min-height: 100%;
    background-image: inherit;
}

.right-pane-header {
    display: block;
    height: 100px;
    width: 100%;
    background-color: #ffb0b0;
}

.right-pane-content {
    display: block;
    width: 100%;
    background-image: inherit;
    overflow-y: auto;
}

再次感谢！

Answer 1

也许我不理解这个问题，但如果你只想要滚动，你可以让它占据html长度的100％

.right-pane-content {
 display: block;
 width: 100%;
 height: 100%;
 background-image: inherit;
 overflow-y: auto;}

滚动div，而不是整页

1 个答案: