Question

我在div中有一个div，但是第二个div没有从父div的顶部开始，它被一个标题分流。第二个div包含很多东西，需要滚动，所以我将它设置为100％高度并允许溢出;但是，因为它不是从父div的顶部开始，而是延伸到父级的底部。

这是一段代码片段

html, body {
    height: 100%;
    overflow:hidden;
    margin:0;padding:0
}

.profile-box {width: 46.6%; /*max-width: 560px;*/ height: 35%; max-height:600px; background-color:white; margin:1.6%; padding-top: 0.8%; padding-left: 0.8%; padding-right: 0.8%;}
.profile-form {margin-right:5; margin-left:auto; padding-right:3%;}
.profile-slider {width:45%}
.profile-slider-label {margin-right:1%}

.left-align {float:left;}
.right-align {float:right;}
.y-scolling {overflow-y:auto; overflow-x:hidden; height:100%;}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<body>
    <div class="profile-box right-align" style="background-color:red">
         <h2>Lifestyle</h2>
         <p class="left-align">Scroll for more</p>
         
         <div class="form-horizontal" style="background-color:grey">
             <div class="y-scolling" style="background-color:yellow">
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div><div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 <div class="form-group profile-form">
                     <input runat="server" class="profile-slider right-align" type="range" min="1" max="10" step="1" id="cat1" />
                     <label class="control-label right-align profile-slider-label" for="cat1">Cat1</label>
                 </div>
                 
                 <!-- more of these --> 
             </div>
         </div>
    </div>
</body>

As you can see, the same height as its container, but just offset.

More colours in the divs

Answer 1

尝试添加溢出：滚动;到那个div的css。

示例：

div.someClass { 
 overflow: scroll;
}

您也可以尝试其他溢出属性。但是从图片看起来你希望它在div中滚动。 overflow：hidden也可以是一个选项。

停止div延伸到父母以下

1 个答案: