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

Question

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

图片1：

图片2：

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

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
}