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

Question

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

图片 1:

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
}