文章/答案/技术大牛

发布

问停止div扩展到父目录下
EN

Stack Overflow用户

提问于 2015-02-13 00:48:27

回答 1查看 305关注 0票数 1

我在一个div中有一个div，但是第二个div并不是从父div的顶部开始的，它是由一个头部向下分流的。第二个div包含许多内容，需要滚动，所以我将其设置为100%高度并允许溢出；但是，因为它不是从父div的顶部开始的，所以它延伸到父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>

html

css

height

overflow

回答 1

Stack Overflow用户

发布于 2015-02-13 00:52:51

尝试将overflow: scroll；添加到该div的css中。

示例：

div.someClass { 
 overflow: scroll;
}

您也可以尝试其他溢出属性。但是从图片上看，你想让它在div中滚动。overflow:隐藏也可能是一种选择。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28483108

复制

相似问题

问停止div扩展到父目录下
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止div扩展到父目录下EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问停止div扩展到父目录下
EN