Question

我有两个div：

<div class="body">
    <div class="body-content">
        <h1> HI </h1>
    </div>
</div>

“body”有以下css：

.body {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
}

“body-content”具有以下css：

.body-content {
     background-color: white;
     height: 100%;
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

这使得左侧和右侧的身体内容具有漂亮的黑色边缘。但是，当子div（body-content）溢出时，我希望body div具有滚动条（父级）。现在我只能得到子div以获得滚动条..任何想法？

Answer 1

在你的css中进行以下2项更改：

.body {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: black;
    overflow: auto; /* Added */
}
.body-content {
     background-color: white;
     min-height: 100%; /* Changed from height: 100% */
     width: 90%;
     margin-left: 5%;
     margin-right: 5%;
}

演示：http://jsfiddle.net/hpng1xjr/

Answer 2

在这里看一下溢出的CSS：

http://www.w3schools.com/cssref/pr_pos_overflow.asp

具体来说，您应该可以这样做：

overflow: scroll;

或者，如果您只想垂直滚动：

overflow-y: scroll;

Answer 3

你应该试试这个

 overflow: auto;

Answer 4

添加溢出：滚动到.body风格。如果您想要垂直滚动，请使用overflow-y:scroll或使用overflow-x: scroll

进行水平滚动

CSS：当子进程溢出时，在容器div上滚动条形图

4 个答案: