javascript - CSS 当使用溢出时，差距仍然存在

Question

我创建了一个 HTML 表格，当我使用 overflow 来确保它不超过特定高度时，下面的 div 以文本仍然适合的方式放置。

我需要将 div 直接放在滚动表的下方。

我正在使用 overflow: hidden 但是我仍然可以选择文本，但我看不到它。

$('document').ready(function() {
	var $table = $('#ingsNeededTable'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

	$(window).resize(function() {
		colWidth = $bodyCells.map(function() {
			return $(this).width();
		}).get();
		
		$table.find('thead tr').children().each(function(i, v) {
			$(v).width(colWidth[i] + 1);
		});    
	}).resize();
	
	var loop = setInterval(function() {
		$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
		$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
	}, 1);
});

#ingsNeededTableHolder {
	height: 45%;
}
#ingsNeededTitle, #ingsRecentTitle {
	text-align: center;
}
#ingsNeededTable {
	border-collapse: collapse;
	width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
	border-bottom: 1px solid black;
}
#ingsNeededTable thead {
	display: block;
	width: 100%;
}
#ingsNeededTable tbody {
	display: block;
	height: 40%;
	overflow-y: hidden;
	width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
	width: 40%;
}
.ingsNeededTableNeeded {
	width: 10%
}
#ingsNeededTable tr:nth-child(even) {
	background-color: #eaf2f1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
  <table id='ingsNeededTable'>
    <thead>
      <tr>
        <th class='ingsNeededTableIng'>Ingredient</th>
        <th class='ingsNeededTableNeeded'>Needed (Kg)</th>
        <th class='ingsNeededTableProd'>Product</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <h2>This Should Be Below The Scrolling Table</h2>
</div>

表格在我的页面上正确对齐，但由于某种原因它不在代码段上。

Answer 1

将最大高度设置为 #ingsNeededTableHolder

#ingsNeededTableHolder {
    height: 45%;
    max-height: 150px;
    overflow: hidden;
}

$('document').ready(function() {
	var $table = $('#ingsNeededTable'),
    $bodyCells = $table.find('tbody tr:first').children(),
    colWidth;

	$(window).resize(function() {
		colWidth = $bodyCells.map(function() {
			return $(this).width();
		}).get();
		
		$table.find('thead tr').children().each(function(i, v) {
			$(v).width(colWidth[i] + 1);
		});    
	}).resize();
	
	var loop = setInterval(function() {
		$("#ingsNeededTable tbody").animate({scrollTop: $("#ingsNeededTable tbody").prop("scrollHeight")}, 100000, "linear");
		$("#ingsNeededTable tbody").animate({scrollTop: 0}, 100000, "linear");
	}, 1);
});

#ingsNeededTableHolder {
    height: 45%;
    max-height: 150px;
    overflow: hidden;
}
#ingsNeededTitle, #ingsRecentTitle {
	text-align: center;
}
#ingsNeededTable {
	border-collapse: collapse;
	width: 100%;
}
#ingsNeededTable th, #ingsNeededTable td {
	border-bottom: 1px solid black;
}
#ingsNeededTable thead {
	display: block;
	width: 100%;
}
#ingsNeededTable tbody {
	display: block;
	height: 40%;
	overflow-y: hidden;
	width: 100%;
}
.ingsNeededTableIng, .ingsNeededTableProd {
	width: 40%;
}
.ingsNeededTableNeeded {
	width: 10%
}
#ingsNeededTable tr:nth-child(even) {
	background-color: #eaf2f1
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id='ingsNeededTableHolder'>
  <table id='ingsNeededTable'>
    <thead>
      <tr>
        <th class='ingsNeededTableIng'>Ingredient</th>
        <th class='ingsNeededTableNeeded'>Needed (Kg)</th>
        <th class='ingsNeededTableProd'>Product</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
      <tr>
        <td class='ingsNeededTableIng'>foo</td>
        <td class='ingsNeededTableNeeded'>foo</td>
        <td class='ingsNeededTableProd'>foo</td>
      </tr>
    </tbody>
  </table>
</div>

<div>
  <h2>This Should Be Below The Scrolling Table</h2>
</div>