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

Question

过去两天我一直在努力完成这个任务。请有人帮忙。我想把页面分成两半。左侧 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 应该是什么？多谢。

Answer 1

不需要 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;
}