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滚动不会滚动

回答

相关问题