固定侧边栏，它下面的内容，如何修复？答案

【问题标题】：Fixed sidebar, content under it, how to fix?固定侧边栏，它下面的内容，如何修复？
【发布时间】：2015-04-30 15:12:08
【问题描述】：

我正在尝试制作一个固定的侧边栏，当您滚动页面时它将保持在该位置（如第二张图片所示），但页面内容位于该侧边栏下方，而不是右侧（第一张图片，你可以看到侧边栏上的蓝色部分，那是在栏下的 div。）

Img1:

img2:

（我正在使用图片链接，因为我无法发布它们）

html:

<div class='barralado'>

        ~sidebar content~
</div>

    <div class='conteudo'>

        <div class='inicio'>
            <div class='topo'>
                <p class='titulo'>Liga Juizforana</p>
            </div>
        </div>

    </div>

css:

.barralado {
    position: fixed;
    top: 0;
    left: 0;
}

.conteudo {
    }

.conteudo .topo {
    background-color: #ffffff;
}

.topo .titulo {
    font-size: 4em;
    color: white;
    text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
    margin-top: 3em;
    margin-left: 3.5em;
}

我试图让两者都向左浮动，我试图清除，我尝试了两者的所有位置，但它没有工作

第二个小问题：如何将“conteudo” div 放在侧边栏的右侧后 100vh？当我尝试它时，它不会变为 100vh。

【问题讨论】：

标签： html css

【解决方案1】：

一个固定位置的 div 将固定在页面上，即使您滚动它也是如此。所有的东西都在它之下（它具有 z-index 优先级）。

要解决此问题，请将内容 div 的左填充设置为等于侧边栏的宽度。

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    min-height: 300px; // I suggest you give a value to your sidebar. 
    width:300px; //This is your width;
}

.contneudo{
    padding-left:300px; //This is the padding that will go around your sidebar
}

【讨论】：

成功了！谢谢！但是，你说根据侧边栏宽度做填充，好的，我明白了，但是我不能设置侧边栏宽度，即使那里有 300px，它是一样的，改变它的宽度不会改变什么 idk为什么：O
这可能是因为您也为内部元素（菜单元素）设置了宽度。菜单项有宽度吗？

【解决方案2】：

如果您的侧边栏具有固定宽度，您可以在侧边栏宽度的内容容器左侧使用填充。或者您可以将其浮动到右侧并使用 CSS calc 函数设置宽度。

.conteudo {
  width: -webkit-calc(100% - 200px);
  width: calc(100% - 200px);
  float:right;
}

使用您的代码和填充选项：

.barralado {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
}

.conteudo {
    padding-left: 300px;
}

.conteudo .topo {
    background-color: #ffffff;
}

.topo .titulo {
    font-size: 4em;
    color: white;
    text-shadow: 2px 2px 1px rgba(150, 150, 150, 1);
    margin-top: 3em;
    margin-left: 3.5em;
}

还有其他几种方法，但希望这两种方法中的一种能帮助您实现您想要的。

【讨论】：

我可以用第一个答案做到这一点，但我意识到现在我无法设置侧边栏宽度，即使那里有 300px，它也是一样的，改变它的宽度不会改变什么我知道为什么：O
我不知道为什么你不能在侧边栏上设置宽度，使用你提供的代码对我有用： .barralado { position: fixed;顶部：0；左：0；宽度：300px； } .conteudo { padding-left: 300px; } .conteudo .topo { 背景颜色：#ffffff; } .topo .titulo { 字体大小：4em；白颜色;文字阴影：2px 2px 1px rgba(150, 150, 150, 1);边距顶部：3em；左边距：3.5em； }
对不起，我是新手，不知道它会这样显示我的代码，现在我无法编辑它。请参阅我编辑的答案以更好地显示新代码。

【解决方案3】：

我发现为你的正文内容设置一个网格更容易，用一个空的间隔 div，然后你的主要内容在 div 中。

HTML 文件：

   <div class="gridWrapper">
      <div class="spacer"> </div>
      <div class="yourMainContent"> Your content here</div>
   </div>

CSS 文件：

.gridWrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
}

【讨论】：

【解决方案4】：

在这种固定宽度的情况下，你可以让你的内容 div 绝对定位，以避免进入你的侧边栏：

.conteudo {
   position: absolute;
   top: 0;
   left: 192px; // this is your sidebar width, according to your screenshot
}

或者如果由于某种原因你需要避免绝对定位，你可以用margin来偏移它：

.conteudo {
   margin-left: 192px; // this is your sidebar width, according to your screenshot
}

【讨论】：