制作一个div嵌套页面上滚动调整

问题描述：

我花在这一段时间，但解决不了这个CSS问题。我有4个嵌套的div。最内层的小孩div，拥有一排行。

HTML结构

div class="moduleContentContainer"> 
<div id="dash-board-container"> 
<div class="dash-board-item"> 
    <div class=".quote_list_container"> 
     <table> 
      <tr><td>ssss</td></tr> 
       <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssss</td></tr> 
      <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr>] 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 
       <tr><td>ssggggss</td></tr> 

     <table> 
    </div> 
</div>

（1）我想dash_Board_Item股利有根据其内容（在.quote_list_container格“的内容）的大小，它的高度。因此，如果（2）当窗口调整大小时，在.quote_list_container div上显示一个滚动条，当在表格中有一行时，dash-board-item div应该是小的高度，否则就高一些，具体取决于内容

需要

Ray

http://jsfiddle.net/rayabu1234/pfozmoxh/？ – aldanux 2014-09-19 12:01:37

答

我试着解决你的问题，看例子。

.quote_list_container { 
 
color: #6e6e6e; 
 
font-family: arial; 
 
font-size: 14px; 
 
overflow-y: auto; 
 
overflow-x: hidden; 
 
/* position: relative; */ 
 
max-height: 91%; 
 
} 
 

 
.dash-board-item { 
 
margin-right: 20px; 
 
display: inline-block; 
 
border-style: solid; 
 
max-width: 700px; 
 
min-width: 300px; 
 
border-color: #999999; 
 
border-width: 1px; 
 
/* box-shadow: 0px 0px 1px rgb(109,109,110); */ 
 
/* float: left; */ 
 
padding-left: 10px; 
 
padding-right: 10px; 
 
margin-bottom: 20px; 
 
position: relative; 
 
    height: 100%; 
 
     overflow: auto; 
 
    
 
} 
 

 
#dash-board-container { 
 
position: absolute; 
 
height: 90%; 
 
} 
 

 
.moduleContentContainer { 
 
width: 100%; 
 
}

<div class="moduleContentContainer"> 
 
<div id="dash-board-container"> 
 
    <div class="dash-board-item"> 
 
     <div class=".quote_list_container"> 
 
      <table> 
 
       <tr><td>ssss</td></tr> 
 
        <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssss</td></tr> 
 
       <tr><td>ssggggss</td></tr> 
 
        
 
      <table> 
 
     </div> 
 
    </div> 
 
</div> 
 
</div>

谢谢..你有滚动条时调整工作。但.dash_board_item高度应设置为它的内容，而不是设置为 – user3105158 2014-09-19 12:10:19

页面的高度，该解决方案可以给你'最大高度：100％;''到.dash板-item'和删除'高度：100 ％' – 2014-09-19 12:16:29

如果你喜欢我的回答比你能接受其他审查。 – 2014-09-29 05:14:09

答

首先，你有你的HTML中的错误：div class=".quote_list_container"你应该从类中删除名称超前时段.。

其次，由于含有该内容的元素嵌套耦合元件的内，则可以通过使用与max-height百分比值遇到麻烦。因为你必须明确指定为父母一个明确的高度。

因此，可以使用vh viewport percentage unit来实现这一目标：

Example Here

.quote_list_container { 
    overflow-y: auto; 
    overflow-x: hidden; 
    max-height: 100vh; 
}

规格从W3C：

VH单元
等于1％ t的高度他最初包含阻止。

值得注意的是，vh视口相对长度为supported in IE9及以上。

制作一个div嵌套页面上滚动调整

相关推荐