防止DIV溢出另一个div？

Question

从我的代码和逻辑来看，一切似乎都是正确的。为什么我的新闻DIV会溢出到我的Box D，其中所有的按钮都是。这对我没有任何意义。

以下是问题的图片：

* {
  font-family: Segoe UI;
  font-size: 9pt;
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  padding: 0;
  margin: 0;
  background-color: #bbc3cb;
  width: 100%;
  height: 100%;
}
#main {
  border: 1px solid rgb(112, 112, 112);
  width: 800px;
  height: 650px;
  margin: 0 auto;
}
#boxA {
  padding-top: 7px;
  padding-bottom: 7px;
  padding-left: 3px;
  border-bottom: 1px solid rgb(180, 180, 180);
  background: #FFF;
}
#boxB {
  height: 573px;
  width: 200px;
  border: 0;
  float: left;
  background: #FFF;
}
#boxC {
  background: rgb(240, 240, 240);
  height: 573px;
  width: 598px;
  border-left: 1px solid rgb(180, 180, 180);
  border-top: 0;
  border-bottom: 0;
  border-right: 0;
  display: inline-block;
}
#boxD {
  background: rgb(240, 240, 240);
  border-top: 1px solid rgb(180, 180, 180);
  height: 44px;
  text-align: center;
  display: table;
  width: 100%;
  ;
}
#menu {
  list-style-type: none;
  padding: 0;
  margin: 0;
}
#menu li {
  padding: 4px;
  border: 1px solid #FFF;
}
#menu li:hover {
  cursor: pointer;
}
.selected {
  background: rgb(51, 153, 255);
  color: #FFF;
  border: 1px solid #FFF;
  font-weight: bold;
}
.hidden {
  display: none;
}
.item {
  width: 100%;
  height: 100%;
}
input[type="button"] {
  cursor: pointer;
  border: 1px solid #707070;
  background-color: #F0F0F0;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
  padding: 3px 6px;
  width: 75px;
}
input[type="button"]:hover {
  cursor: pointer;
  background-color: #EAF6FD;
  border: 1px solid #3C7FB1;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}
input[type="button"][disabled],
input[type="button"][disabled]:hover {
  border: 1px solid #ADB2B5;
  text-shadow: 1px 1px #fff;
  cursor: default;
  background-color: #F4F4F4;
  box-shadow: inset 0 1px 2px #fff;
}
div.frameT {
  width: 100%;
  padding: 0;
  display: table;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
div.frameTC {
  padding: 0;
  vertical-align: middle;
  display: table-cell;
  margin: 0;
}
.section-title {
  padding: 0;
  margin: 0;
  color: rgb(11, 63, 113);
  font-weight: bold;
}
#news {
  overflow-y: scroll;
  height: 100%;
  margin-bottom: 5px;
  border: 1px solid red;
  display: block;
}

<div class="frameT">
  <div class="frameTC">



    <div id="main">

      <div id="boxA"><b>Application Title</b>
      </div>

      <div id="boxB">
        <ul id="menu">
          <li data-show="#1">Notes and Updates</li>
          <li data-show="#2">Menu Item 2</li>
          <li data-show="#3">Menu Item 3</li>
        </ul>
      </div>

      <div id="boxC">
        <div id="1" class="hidden item">

          <span class="section-title">Notes and Updates</span>

          <br>

          <div id="news"></div>

        </div>
        <div id="2" class="hidden item">
          Content Tab 2
        </div>
        <div id="3" class="hidden item">
          Content Tab 3
        </div>
      </div>

      <div id="boxD">

        <div style="display: table-cell; vertical-align: middle;">
          <input type="button" value="Search" class="btn" disabled>
          <input type="button" value="Save" class="btn" disabled>
          <input type="button" value="Add" class="btn" disabled>
          <input type="button" value="Clear All" class="btn">
          <input type="button" value="Delete" class="btn" disabled>
          <input type="button" value="Export" class="btn" disabled>
          <input type="button" value="Recall" class="btn" disabled>
        </div>

      </div>
      <!-- End of Main -->


    </div>
  </div>

Answer 1

你的新闻div是100％，但你也有：

<span class="section-title">Notes and Updates</span>

这占用了一些空间。你可以调整新闻div的大小（make更小），也许在另一个div中的标签为10％并使新闻div为90％

ETA - 或者您可能希望将容器div overflow-y属性设置为隐藏或滚动。

Answer 2

高度和宽度始终相对于父级。在这种情况下，您的news div将与boxC一样高。由于您拥有上述标题，因此此部分的高度将为news +〜20px的父级的100％。

我的建议是使用display:inline-block和height:20px设置标题的特定高度，如下所示：

.section-title {
    padding: 0;
    margin: 0;
    color: rgb(11, 63, 113);
    font-weight: bold;
    height: 20px;
    display: inline-block;
}

因此，您确切知道每个浏览器的大小。现在，您可以使用CSS3 calc函数来确定您的框的高度height:calc(100>% - 20px)：

#news {
    overflow-y: scroll;
    height: calc(100% - 20px);
    margin-bottom: 5px;
    border: 1px solid red;
    display: block;
}

您可以看到此fiddle

Answer 3

这很简单，只需使用 overflow：auto 即可。看看你的例子：

* {
    font-family: Segoe UI;
    font-size: 9pt;
    box-sizing: border-box;
}
html {
    height:100%;
}
body {
    padding: 0;
    margin: 0;
    background-color: #bbc3cb;
    width: 100%;
    height: 100%;
}
#main {
    border: 1px solid rgb(112,112,112);
    width: 800px;
    height: 650px;
    margin: 0 auto;
}
#boxA {
    padding-top: 7px;
    padding-bottom: 7px;
    padding-left: 3px;
    border-bottom: 1px solid rgb(180,180,180);
    background: #FFF;
}
#boxB {
    height: 573px;
    width: 200px;
    border: 0;
    float: left;
    background: #FFF;
}
#boxC {
    background: rgb(240,240,240);
    max-height: 573px;
    width: 598px;
    border-left: 1px solid rgb(180,180,180);
    border-top: 0;
    border-bottom: 0;
    border-right: 0;
    display: inline-block;
  overflow:auto;
}
#boxD {
    background: rgb(240,240,240);
    border-top: 1px solid rgb(180,180,180);
    height: 44px;
    text-align: center;
    display: table;
    width: 100%;;
}
#menu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}
#menu li {
    padding: 4px;
        border: 1px solid #FFF;
}
#menu li:hover {
    cursor: pointer;
}
.selected {
    background: rgb(51,153,255);
    color: #FFF;
    border: 1px solid #FFF;
    font-weight: bold;
}
.hidden{ display:none; }


.item {
    width: 100%;
    height: 100%;
}


input[type="button"] 
{
  cursor:pointer; 
  border: 1px solid #707070;
  background-color: #F0F0F0;
  border-radius: 4px;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #DDD;
  background-image: -ms-linear-gradient(top, #F1F1F1 0%, #E3E3E3 50%, #D0D0D0 100%);
  padding: 3px 6px;
  width: 75px;
}

input[type="button"]:hover 
{
  cursor:pointer;
  background-color: #EAF6FD;
  border: 1px solid #3C7FB1;
  box-shadow: inset 0 1px 2px #fff, inset 0 -0.7em #BEE6FD, 0 0 3px #A7D9F5;
}

input[type="button"][disabled], input[type="button"][disabled]:hover

{
  border: 1px solid #ADB2B5;
  text-shadow: 1px 1px #fff;
  cursor:default;
  background-color: #F4F4F4;
  box-shadow: inset 0 1px 2px #fff;
}


div.frameT {
    width: 100%;
    padding: 0;
    display: table;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}
div.frameTC {
    padding: 0;
    vertical-align: middle;
    display: table-cell;
    margin: 0;
}
.section-title {
    padding:0;
    margin:0;
    color: rgb(11,63,113);
    font-weight: bold;
}
#news {
    overflow-y: scroll;
    height: 100%;
    margin-bottom: 5px;
    border: 1px solid red;
    display: block;

}

<div class="frameT">
<div class="frameTC">



        <div id="main">

            <div id="boxA"><b>Application Title</b></div>

            <div id="boxB">
                <ul id="menu">
                    <li data-show="#1">Notes and Updates</li>
                    <li data-show="#2">Menu Item 2</li>
                    <li data-show="#3">Menu Item 3</li>
                </ul>
            </div>

            <div id="boxC">
              
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.

Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.

Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac blandit sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla facilisis lectus vel pharetra tempus. Nulla sagittis enim mauris, vel imperdiet purus lobortis et. Nullam laoreet neque eget lectus finibus mattis. Cras sagittis, tortor vel vehicula placerat, dui sem imperdiet lectus, sit amet ultricies ante est nec elit. Sed consectetur lobortis dui non dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.

Curabitur elit dui, laoreet in orci et, feugiat malesuada quam. Pellentesque hendrerit diam et leo blandit, non tristique nisi blandit. Praesent ac sem quis turpis euismod malesuada et non justo. Quisque in diam risus. Donec eget sapien at libero ullamcorper sagittis. Integer nunc dolor, suscipit nec tincidunt quis, varius vitae mauris. Quisque malesuada enim ut semper tincidunt.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris feugiat ullamcorper iaculis. Donec sit amet turpis eu dui eleifend cursus eget a ante. Vivamus nec ligula a nunc consequat luctus a in libero. Nunc eu felis vel ante pellentesque aliquam eu sed augue. Mauris nec mi sit amet quam euismod pulvinar. Donec euismod sollicitudin bibendum. Maecenas accumsan neque vel pulvinar tempor. Morbi sit amet dolor pellentesque, vehicula lectus sit amet, accumsan mauris. Sed aliquam mi imperdiet quam scelerisque, et euismod felis auctor. Curabitur sit amet eros leo.

Duis placerat, ipsum quis lacinia tempus, purus dolor congue quam, eu tempor orci augue et libero. Curabitur ut ullamcorper mauris, tristique sollicitudin nisi. Ut est dolor, varius id tellus a, sagittis eleifend libero. Fusce gravida scelerisque facilisis. Aenean sollicitudin dolor in ante porttitor, ut finibus felis maximus. Morbi aliquet risus lectus. Pellentesque tincidunt enim quis cursus rutrum. Pellentesque at placerat enim, id consequat ex. Praesent justo magna, fermentum non erat in, aliquam euismod velit. Nulla facilisi. Donec mi nulla, bibendum vel nibh varius, consectetur vestibulum nunc. Vestibulum suscipit mollis efficitur.

Nunc dapibus eget nunc non feugiat. Etiam dictum nulla sed gravida volutpat. Quisque non metus tristique, accumsan tortor sed, sollicitudin lorem. Suspendisse facilisis suscipit lacus fringilla pulvinar. Suspendisse placerat condimentum justo, vel mollis ante lacinia non. Sed tempus elementum ligula, pulvinar accumsan justo viverra eu. Suspendisse justo massa, elementum nec hendrerit a, congue nec arcu.
                <div id="1" class="hidden item">

                    <span class="section-title">Notes and Updates</span>

                    <br>

                    <div id="news"></div>

                </div>
                <div id="2" class="hidden item">
                    Content Tab 2
                </div>
                <div id="3" class="hidden item">
                    Content Tab 3
                </div>
            </div>

            <div id="boxD">

                <div style="display: table-cell; vertical-align: middle;">
                    <input type="button" value="Search" class="btn" disabled>
                    <input type="button" value="Save" class="btn" disabled>
                    <input type="button" value="Add" class="btn" disabled>
                    <input type="button" value="Clear All" class="btn">
                    <input type="button" value="Delete" class="btn" disabled>
                    <input type="button" value="Export" class="btn" disabled>
                    <input type="button" value="Recall" class="btn" disabled>
                </div>

            </div><!-- End of Main -->


</div>
</div>