Div中的Div滾動不會滾動

將結果填充到div2中，但div scroll沒有按照我的想法顯示。看起來像div2 100％是瀏覽器的底部，但在特定區域無法達到100％。這個div停留在右側。我怎樣才能把我的結果放入div2中的滾動？Div中的Div滾動不會滾動

的jsfiddle：https://jsfiddle.net/nx02w9h5/1/

HTML

<div id="sideContainer"> 
    <div id="midContainer"> 
    <div id="menuBox"> 
     <div id="div1"> 
     <ul class="tabs-menu"> 
      <li class="current"><a href="#tab-1">TBD</a></li> 
      <li><a href="#tab-2">TBD</a></li> 
      <li><a href="#tab-3">TBD</a></li> 
     </ul> 
     <div class="tab"> 
      <div id="tab-1" class="tab-content"> 
      <form name="sOptForm" id="sOptForm"> 
       <input type="radio" name="searchOp" class="sOption" value="opt1" checked> opt1 
       <br> 
       <input type="radio" name="searchOp" class="sOption" value="opt2"> opt2 
       <br> 
       <input type="radio" name="searchOp" class="sOption" value="opt2"> opt3</form> 
      <br /> 
      <input type="text" id="stateName" value="Dorm"> 
      <input id="execute" type="button" value="Search"> 

      </div> 
      <div id="div2"> 
      sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br>sadfgsadfadsfsad 
      <br> 

      </div> 

      <div id="tab-2" class="tab-content"> 
      <!--contents--> 
      </div> 
      <div id="tab-3" class="tab-content"> 
      <!--contents--> 
      </div> 
     </div> 

     </div> 
    </div> 
    </div> 
</div>

CSS

html, 
body, 
{ 
    padding: 0; 
    margin: 0; 
    height: 100%; 
    width: 100%; 
    overflow: hidden; 
} 

#sideContainer { 
    display: table; 
    z-index: 888; 
    position: absolute; 
    top: 0px; 
    right: 0px; 
    width: 300px; 
    vertical-align: middle; 
    height: 100%; 
} 

#midContainer { 
    display: table-cell; 
    vertical-align: middle; 
    bottom: 0px; 
    height: 100%; 
} 

#menuBox { 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
    border-top-style: solid; 
    border-bottom-style: solid; 
    border-left-style: solid; 
    border-color: red; 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#div1, 
#div2 { 
    position: absolute; 
} 

#div1 { 
    top: 0px; 
    right: 0px; 
    width: 100%; 
    height: 100%; 
} 

#div2 { 
    color: #500000; 
    top: 160px; 
    width: 98%; 
    right: 0px; 
    overflow: scroll; 
} 

#search_res { 
    width: 97%; 
} 

ul { 
    list-style-type: none; 
    padding: 0; 
} 

.tabs-menu { 
    height: 20px; 
    float: left; 
    clear: both; 
} 

.tabs-menu li { 
    height: 30px; 
    line-height: 30px; 
    float: left; 
    margin-right: 10px; 
    background-color: #ccc; 
    border-top: 1px solid #500000; 
    border-right: 1px solid #500000; 
    border-left: 1px solid #500000; 
    border-radius: 5px 5px 0px 0px; 
} 

.tabs-menu li.current { 
    position: relative; 
    border-bottom: 1px solid #F4AF00; 
    background-color: #B7A66D; 
    z-index: 5; 
} 

.tabs-menu li a { 
    padding: 10px; 
    color: #500000; 
    text-decoration: none; 
} 

.tabs-menu .current a { 
    color: #500000; 
} 

.tab { 
    float: left; 
    margin-bottom: 10px; 
    width: 98%; 
    height: 100%; 
} 

.tab-content { 
    width: 98%; 
    padding: 0px; 
    display: none; 
} 

#tab-1 { 
    display: block; 
}

的感謝！

來源

2016-06-16 Minnu P

嗨Minnu，因爲你正在使用'位置：絕對;'定位與'頂部：160px;'，溢出滾動似乎有意想不到的結果。我建議你使用jQuery來計算**應該被**看到的區域，然後將**值**作爲'max2 height：'值應用到'＃div2'元素。 –

添加bottom: 0你的CSS規則

Updated fiddle

#div2 { 
    color: #500000; 
    top: 160px; 
    width: 98%; 
    right: 0px; 
    bottom: 0; 
    overflow: scroll; 
}

來源

2016-06-16 17:56:12 LGSon

與添加一行css很好地工作！ –

LGSon，很好的解決方案，但只是檢查，這是否適用於所有瀏覽器？ –

@AlexanderDixon在Chrome，FF，Edge，IE11測試成功，所以是的，這是一個「老」的把戲，將他們所有的工作到IE6/7我猜 – LGSon

這是你的工作提琴

https://jsfiddle.net/sesn/nx02w9h5/3/

設置#div2{ max-height: 100px }

來源

2016-06-16 17:57:38 SESN

這不是一個CSS類。 –

這解決了這個問題，但結果並不像LGSon的答案那樣優雅。因爲父對象的高度屬性是基於百分比的，所以您需要jQuery來計算窗口大小調整時應該動態調整的最大高度。 –

LGSon的解決方案是最好的。如果我帶我的解決方案，那麼我需要添加另一個jquery函數來自動化最大高度。 – SESN

$(document).ready(function() { 
 
    
 

 
    var totalwidth = $(window).width(); 
 
    var sideContainer = $("#sideContainer").width()-50; 
 
    var totalheight = $(window).height(); 
 
    var headerheight = $(".titlediv").height(); 
 

 
    var cw = totalwidth - sideContainer; 
 
    
 
    $(".midcontainer").width(cw); 
 
    
 
    var ch = totalheight - headerheight-20; 
 
    $(".midcontainer").height(ch); 
 
    
 
    });

你只是計算你的DIV 1和DIV2的高度和寬度。在這裏，我只是顯示方法

來源

2016-06-16 18:12:22

Div中的Div滾動不會滾動

回答

相關問題