html - Bootstrap 3并排两个50％宽度div

最近两天，我一直在努力实现这一目标。请有人帮忙。我正在尝试将页面分成两半。左侧100％高度，右侧仅滚动更多内容。为什么右侧塌陷在左侧上方？如何解决Bootstrap 3中的这个谜语？这是我的代码：

<section id="main-body" class="container-fixed main-body">
        <div class="row text-center">
            <div class="col-md-6 left-side-home-outer">
                Left Side Content
           </div>

            <div class="col-md-6 right-side-home">
                Right Side Content
            </div>
        </div>
</section>

.left-side-home-outer {
border: 1px solid blue;
height: 100%;
position: fixed;
font-family: "Roboto";
font-weight: 800;
}

.right-side-home-outer {

border: 1px solid blue;
height: 100%;
width: 50%;
overflow: auto;
font-family: "Roboto";
font-weight: 800;
}

如果可能的话，如果我想在左侧底部添加固定的页脚，CSS是什么？
非常感谢。

最佳答案

不需要position: fixed ..那是导致内容重叠的原因。

width:50%也是多余的，因为它已经是col-md-6 .50％宽度的列。

<section id="main-body" class="container-fixed main-body">
        <div class="row text-center">
            <div class="col-md-6 left-side-home-outer">
                Left Side Content
           </div>

            <div class="col-md-6 right-side-home">
                Right Side Content
            </div>
        </div>
</section>

.left-side-home-outer {
border: 1px solid blue;
height: 100%;
font-family: "Roboto";
font-weight: 800;
}

.right-side-home-outer {

border: 1px solid blue;
height: 100%;
overflow: auto;
font-family: "Roboto";
font-weight: 800;
}

关于html - Bootstrap 3并排两个50％宽度div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36070657/