Question

我确信这已被问过很多次但是经过一段时间寻找解决方案之后我终于在这里提出问题了！

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

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

我会使用人造柱效果，我指定侧边栏的背景图像，但为了保持我的设计的完整性，我必须为身体设置不同的背景图像。

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

希望如果我没有足够好地沟通它，可以帮助您了解问题所在！

干杯！

Answer 1

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

Answer 2

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

具有固定大小元素的标题
一个页脚
带有滚动条的侧栏，占据剩余高度
含量

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

我确实使用了角度，我希望我的组件大小为其父元素的100％。

关键是要设置所有父母的大小（百分比）以限制其大小。在以下示例中，myapp height具有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>

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

2 个答案: