Question

将结果填充到div2中但是div滚动没有像我想象的那样显示。看起来像div2 100％远远落后于浏览器但却无法在给定区域内达到100％。这个div住在右边。如何用滚动条将结果放入div2？

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;
}

谢谢！

Answer 1

将bottom: 0添加到CSS规则

Updated fiddle

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

Answer 2

＆＃13;

$(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);
    
    });

＆＃13;

你只计算你的div 1和div2的高度和宽度。这里我只展示方法

Answer 3

这是你的工作小提琴

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

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

Div中的Div滚动不会滚动

3 个答案: