製作一個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

來源

2014-09-19 user3105158

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>

來源

2014-09-19 12:06:12

謝謝..你有滾動條時調整工作。但.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及以上。

來源

2014-09-19 12:19:39

製作一個div嵌套頁面上滾動調整

回答

相關問題