HTML / CSS-边栏长度100％页面高度，无论垂直滚动条如何

Question

我敢肯定，已经问了很多次了，但是在寻找了解决方案一段时间后，我终于在这里求助了！

我正在为我正在开发的应用程序处理HTML帮助文件，该文件分为两部分。 一是侧边栏（向左浮动），二是主内容部分（也向左浮动）。

我面临的问题是，当主要内容超出页面高度的100％时，侧边栏背景停止。

我将使用人造列效果在其中为侧边栏分配背景图像，但是为了保持设计的完整性，我必须为车身设置不同的背景图像。

看看我设置的这个JS小提琴-http: //jsfiddle.net/5gpFx/

希望如果我未能很好地传达问题，可以帮助您了解问题所在！

干杯!

Answer 1

我遇到了同样的问题，但是我无法使用上面的flexboxes解决方案。 因此，我创建了自己的模板，其中包括：

具有固定大小元素的标题
页脚
带有滚动条的边栏占据了剩余的高度
内容

我使用了flexbox，但以一种更简单的方式，只使用了display属性：flex和flex-direction：row | column ：

我确实使用angular，并且我希望组件尺寸为其父元素的100％。

关键是为所有父母设置尺寸（以百分比为单位），以限制其尺寸。 在以下示例中，myapp高度具有100％的视口。

主要组件占视口的90％，因为页眉和页脚占5％。

我在这里发布了模板： https ： //jsfiddle.net/abreneliere/mrjh6y2e/3

       body{
        margin: 0;
        color: white;
        height: 100%;
    }
    div#myapp
    {
        display: flex;
        flex-direction: column;
        background-color: red; /* <-- painful color for your eyes ! */
        height: 100%; /* <-- if you remove this line, myapp has no limited height */
    }
    div#main /* parent div for sidebar and content */
    {
        display: flex;
        width: 100%;
        height: 90%; 
    }
    div#header {
        background-color: #333;
        height: 5%;
    }
    div#footer {
        background-color: #222;
        height: 5%;
    }
    div#sidebar {
        background-color: #666;
        width: 20%;
        overflow-y: auto;
     }
    div#content {
        background-color: #888;
        width: 80%;
        overflow-y: auto;
    }
    div.fized_size_element {
        background-color: #AAA;
        display: block;
        width: 100px;
        height: 50px;
        margin: 5px;
    }

HTML：

<body>
<div id="myapp">
    <div id="header">
        HEADER
        <div class="fized_size_element"></div>

    </div>
    <div id="main">
        <div id="sidebar">
            SIDEBAR
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
            <div class="fized_size_element"></div>
        </div>
        <div id="content">
            CONTENT
        </div>
    </div>
    <div id="footer">
        FOOTER
    </div>
</div>
</body>

Answer 2

只需将两列包装在一个容器中，并在其上设置人造列背景-这样，主体将可用于设置您想要的任何图像。 我在这里做了一个简单的例子： http : //jsfiddle.net/5gpFx/2/

HTML / CSS-边栏长度100％页面高度，无论垂直滚动条如何

问题描述

2 个解决方案

解决方案1
0 2016-08-25 23:12:42

解决方案2
0 2011-10-27 09:02:20

HTML / CSS-边栏长度100％页面高度，无论垂直滚动条如何

问题描述

2 个解决方案

解决方案1 0 2016-08-25 23:12:42

解决方案2 0 2011-10-27 09:02:20

解决方案1
0 2016-08-25 23:12:42

解决方案2
0 2011-10-27 09:02:20