设置div的最大高度不起作用

时间:2017-07-14 01:19:50

标签: html css

我想在第一个div内的div上设置最大高度,但是max-height不起作用。    The output should be like this

<div style="height: 300px; top:10px;">
       <table>
       </table>
       <div style="top:50px; max-height:100px; overflow-y:scroll; position:relative;">
       <table>
       <tr>
       </tr>
       <tr>
       </tr>
       </table>
       </div>
       <div style="position:relative;">
        text here
       </div>
    </div>

1 个答案:

答案 0 :(得分:2)

最大高度应该有效。我不确定你的示例是否直接从你的工作代码中复制,但你没有关闭内部表。同时设置顶部两者都将一切都变得怪异。如果将CSS移动到自己的文件中,那么查看CSS会更容易。

.Outer {
  height:300px;
 }
 
 .Inner {
  max-height: 100px;
  overflow-y: scroll; 
  position: relative;
}

.Inner-Table {
  height: 200px;
}
.Relative {
  position: relative;
}
<div class="Outer">
  <table>
  </table>
  
  <div class="Inner">
    <table class="Inner-Table">
      <tr>
        <td>Cell 1-1</td>
        <td>Cell 1-2</td>
      </tr>
      <tr>
        <td>Cell 2-1</td>
        <td>Cell 2-2</td>
      </tr>
     </table>
  </div>
  
  <div class="Relative">
    text here
  </div>
 </div>