HTML/CSS-边栏长度100%页面高度，与垂直滚动条无关_Html_Css

HTML/CSS-边栏长度100%页面高度，与垂直滚动条无关

html css

HTML/CSS-边栏长度100%页面高度，与垂直滚动条无关,html,css,Html,Css,我相信这已经被问了很多次了，但是在寻找解决方案的一段时间之后，我终于求助于问一个问题了我正在为我正在开发的应用程序编写一个HTML帮助文件，该文件分为两个部分。一个是侧边栏（浮动到左侧），两个是主要内容部分（也浮动到左侧）我面临的问题是，当主要内容超出页面高度的100%时，边栏背景停止我会使用人造柱的效果，我分配了我的侧边栏的背景图像，但为了保持我的设计的完整性，我必须为身体设置一个不同的背景图像看看我设置的JS小提琴- 希望这能帮助你看到问题是什么，如果我没有很好地沟通它干杯只需将

我相信这已经被问了很多次了，但是在寻找解决方案的一段时间之后，我终于求助于问一个问题了

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

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

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

看看我设置的JS小提琴-

希望这能帮助你看到问题是什么，如果我没有很好地沟通它

干杯

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

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

我也有同样的问题，但我无法用上面的FlexBox解决这个问题。因此，我创建了自己的模板，其中包括：

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

我使用了FlexBox，但方式更简单，只使用属性显示：flex和flex方向：行|列：

我确实使用角度，我希望我的组件大小是其父元素的100%

关键是为所有父母设置大小（百分比），以限制他们的大小。在以下示例中，myapp高度占视口的100%

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

我在这里发布了我的模板：

正文{
保证金：0；
颜色：白色；
身高：100%；
}
分区#myapp
{
显示器：flex；
弯曲方向：立柱；
背景色：红色；/*我也有同样的问题，但我无法使用上面的FlexBox解决方案。因此我创建了自己的模板，其中包括：

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

我使用了FlexBox，但方式更简单，只使用属性显示：flex和flex方向：行|列：
我确实使用角度，我希望我的组件大小是其父元素的100%
关键是为所有父对象设置大小（以百分比为单位），以限制其大小。在下面的示例中，myapp height占视口的100%
主组件占视口的90%，因为页眉和页脚占5%
我在这里发布了我的模板：
正文{
保证金：0；
颜色：白色；
身高：100%；
}
分区#myapp
{
显示器：flex；
弯曲方向：立柱；
背景色：红色/*
       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;
    }

<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>