使用位置：固定的左右侧边栏重叠主要内容答案

【问题标题】：left and right sidebars overlapping main content using position:fixed使用位置：固定的左右侧边栏重叠主要内容
【发布时间】：2022-02-11 13:14:21
【问题描述】：

我是 CSS 新手。试图研究一些布局并遇到这个问题。在 HTML 中。我有

        <div id="wrapper"> 
            <aside id="sidebar" class="left">
            </aside>   
            <div class="content">
                Lorem ipsum blah blah (cutted: about 100lines)
            </div>
    
            <aside id="sidebar" class="right">
            </aside>   
        </div>

我试图阻止左右侧边栏（旁边）滚动。无论我滚动多少主目录，它都会一直呆在那里；我已将其位置设置为固定，看起来一切都很好。问题是，调整大小时，主要内容与右侧边栏（旁边）重叠。我已经尝试过 position: relative 和 absolute 向右并将其更改为 div 但没有任何反应。目标是 - 当我的 chrome 浏览器缩小时，它应该显示水平/垂直滚动条，而主要内容没有任何重叠。无论我的主要内容有多长，侧边栏都应该一直存在！先感谢您！下面的CSS

body, html {
    font-family: Helvetica;
    background-color: rgba(0, 0, 0);
}
#sidebar {
    position: fixed;
    width: 400px;
    height: 100%;
    margin-top: 120px;
    top: 0;
}
.left {
    left: 0;
    bottom: 0;
    background-color: rgb(82, 50, 50);
}
.content {
    display: inline-block;
    background-color: rgb(255, 255, 255);
    margin-top: 120px;
    top: 0;
    width: 800px;
    height:100%;
    margin-left: 400px;
    margin-right: 400px;
}
.right {
    right: 0;
    bottom: 0;
    background-color: rgb(255, 217, 0);
}

#wrapper {
    margin-left:0;
    margin-right:0;
    max-width: 1600px;
    border:1px solid white;
}

【问题讨论】：

使用 flex，您可以通过更现代和可扩展的方法获得完全相同的结果

标签： html css

【解决方案1】：

您需要给.content 一个动态宽度，而不是您设置的静态宽度。试试这个

.content {
    width: calc(100% - 400px - 400px); /* where 400px and 400px are the width of the sidebars */
}

【讨论】：

【解决方案2】：

问题是你正在使用position: fixed，而你正在使用px：

具有位置的元素：固定；相对于视口，这意味着它始终保持在同一个位置，即使页面滚动。使用了 top、right、bottom 和 left 属性定位元素。

通过使用 px，即使窗口大小非常小，元素大小也将始终为 400px。为了防止内容与其他元素重叠并与其他元素保持相同的比例，您应该使用%，它是容器大小的百分比，并且它将保持aside和div之间的相同比例。窗口大小。

另一个解决方案是给你media screen

@media CSS at 规则可用于根据一个或多个媒体查询的结果应用样式表的一部分。使用它，当且仅当媒体查询与正在使用内容的设备匹配时，您指定一个媒体查询和一个 CSS 块以应用于文档。

查看更多here

如果您想阻止aside 滚动，只需使用：

aside{
overflow: hideen
}

【讨论】：