修复了侧边栏，其下的内容，如何修复？

Question

我正在尝试制作一个固定的侧边栏，当您滚动页面时（例如在第二张图片中）会保留在该位置，但页面内容位于该侧边栏下方，而不是右侧（第一张图像，你可以看到侧边栏上的蓝色部分，那就是栏下的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。

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

Answer 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;
}

还有其他一些方法，但希望其中一个选项可以帮助您实现自己想要的目标。

Answer 3

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

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

或者如果由于某种原因你需要避免绝对定位，你可以用保证金抵消：

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