保持内部div不超出固定高度外部div

时间：2016-07-28 07:11:32

标签： html css

我需要我的最后一个div（“内容”），其高度可以变化，以扩展以填充容器div但不扩展超出它。如果内容div的内容不适合，则只需使用overflow-y: auto

滚动即可

但是，我似乎无法包含内容div。我已经尝试了很多css而没有成功，并会感谢一些帮助。

更新 我看到我遗漏了一条重要的信息。我不想指定“content”div的固定高度，因为容器的高度可以变化（可以调整大小）。我必须用每个mousemove（我试图避免）来计算和调整内容的高度。

这是a fiddle 

#container {
  max-height: 350px;
  width: 200px;
  border: 2px solid black;
  display: block;
  position: absolute;
}
#title {
  height: 100px;
  width: 100%;
  border: 2px solid red;
}
#tabs {
  height: 100px;
  width: 100%;
  border: 2px solid green;
}
#content {
  height: 100%;
  width: 100%;
  border: 2px solid blue;
  overflow-y: auto;
}
<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

6 个答案:

答案 0 :(得分：4)

说明：

将溢出：隐藏; 添加到 #container 并添加 溢出-y：自动; 到 #content属性

<强>滚动-演示 

 #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: relative;
     overflow: hidden;
 }
 #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
 }
 #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
 }
 #content {
     height: 100px;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
 }
<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC
          </label>
        </td>
      </tr>
    </table>
  </div>
</div>

答案 1 :(得分：3)

height:100%阻止了这一点。指定高度，例如，以像素为单位。

或使用height: calc(100% - 208px);来计算动态高度。不要忘记将max-height更改为height。

#container {
  height: 350px;
  width: 200px;
  border: 2px solid black;
  display: block;
  position: absolute;
}
#title {
  height: 100px;
  width: 100%;
  border: 2px solid red;
}
#tabs {
  height: 100px;
  width: 100%;
  border: 2px solid green;
}
#content {
  height: calc(100% - 208px);
  width: 100%;
  border: 2px solid blue;
  overflow-y: scroll;
}
<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
  </div

答案 2 :(得分：1)

这是一种更有趣的方式。不再需要将宽度100％放在整个地方！

   

#container {
    max-height: 350px;
    width: 200px;
    border: 2px solid black;
    display: flex;
    flex-direction: column;
    position: absolute;
}

#title {
    flex: 0 0 100px;
    border: 2px solid red;
}

#tabs {
    flex: 0 0 100px;
    border: 2px solid green;
}
   
#content {
    flex: 1 1 auto;
    border: 2px solid blue;
    overflow-y: auto;
}
<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

答案 3 :(得分：1)

您可以使用display: flex。

执行此操作 
 #container {
   max-height: 350px;
   width: 200px;
   border: 2px solid black;
   position: absolute;
   display: flex;              /* Added */
   flex-direction: column;     /* Added */
 }

 #title {
   height: 100px;
   width: 100%;
   border: 2px solid red;
 }

 #tabs {
   height: 100px;
   width: 100%;
   border: 2px solid green;
 }

 #content {
   height: 100%;
   width: 100%;
   border: 2px solid blue;
   overflow-y: auto;
   flex: auto;              /* Added, this container should stretch in the remaining space */
 }

<强> Working Fiddle

答案 4 :(得分：0)

你只想滚动最后一张桌子，对吗？

＆＃13;
＆＃13; 
   #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: absolute;
     margin-bottom: 15px; /*just to see the bottom*/
   }
   
   #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
     box-sizing: border-box;
   }
   
   #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
     box-sizing: border-box;
   }
   
   #content {
     max-height: 138px;
     box-sizing: border-box;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
   }
＆＃13; 
<div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>
＆＃13;
＆＃13;
＆＃13;

答案 5 :(得分：0)

HTML代码 

   <div id="container">
  <div id="title">
    Title
  </div>
  <div id="tabs">
    Tabs
  </div>
  <div id="content">
    <table>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
      <tr>
        <td>
          <label>ABC</label>
        </td>
      </tr>
    </table>
  </div>
</div>

<强>的CSS 

     #container {
     max-height: 350px;
     width: 200px;
     border: 2px solid black;
     display: block;
     position: absolute;

   }

   #title {
     height: 100px;
     width: 100%;
     border: 2px solid red;
   }

   #tabs {
     height: 100px;
     width: 100%;
     border: 2px solid green;
   }

   #content {
     height: 100px;
     width: 100%;
     border: 2px solid blue;
     overflow-y: auto;
   }

小提琴link

相关问题
最新问题