Question

过去两天我一直试图做到这一点。 Plz有人帮忙。我试图将页面分成两半。左侧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;
}

Answer 2

你不需要有固定的定位，事实上，你不应该。此外，您的班级不需要50％的宽度。试试这个....我无法让它在小提琴中响应，但它在我运行的本地文件中工作（以下是复制的内容）。

<style>
.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;
}

</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">


<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-outer">
                Right Side Content
            </div>
        </div>
</section>


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

Bootstrap 3并排两个50％宽度的div

2 个答案: