Question

table > tbody {
    height: 600px;
    display: block;
    overflow: auto;
}

table > tbody > tr {
    width:100%;
    height: 1440px;
    display:table;
    table-layout:fixed;
}

这个css制作了一个可滚动的表格，或者是可滚动的＆＃39; tr。有用。但我的问题是我有一个＆＃39; div＆＃39; div在＆＃39; tr内的内部＆＃39;。当我设置＆＃39; div＆＃39;的高度时到100％，或任何高度，以便整个＆＃39; div＆＃39;不在tbody的可见范围内，在这种情况下在600px内，文档的滚动条出现。表格的滚动条有和没有＆＃39; div＆＃39;相同。

文档的滚动条延伸到＆＃39; div＆＃39;的底部。应该＆＃34;落后＆＃34; ＆＃39; tbody＆＃39;。当我滚动表格时，文档的滚动条没有变化。

以下是我的问题的一个非常粗略的版本：https://jsfiddle.net/hL8hemka/14/

如您所见，有两个滚动条。如果您看不到两个，请尝试删除css部分中的div { height: 100% }。您会注意到右侧的两个条形中的一个（文档滚动条应该在哪里）消失。

如何在文档上没有滚动条的情况下制作高度为100％的div？

Answer 1

我没有在你的小提琴中看到两个滚动条，除非你的意思是有一个水平和一个垂直滚动条？

无论哪种方式，如果要在任何元素上隐藏滚动条，只需将overflow-x或overflow-y（取决于滚动条是垂直还是水平）设置为隐藏。例如，如果我想隐藏一个垂直滚动条，我会将overflow-x设置为隐藏在我的css中，如下所示：

body {
   overflow-x: hidden;
}

Answer 2

只需停用滚动条：

body
{
    overflow: hidden;
}

fiddle

Answer 3

那是因为你已经为td添加了一个边框，删除它并且它适合所有东西。 x轴上的滚动条隐藏。

td {
 border:none;
}

div {
  border: 1px solid #111;
  height: 100%; /* Removing this hides the 'document' scrollbar*/
}

Answer 4

如果您在表格单元格中没有任何其他元素，我建议您使用不同的方法。您可以将其设置为绝对元素，而不是将高度设置为div。这样，您可以使用top，left，right和bottom属性对其进行尺寸标注。

td {
  position:relative;
}

td > div {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
}

在可滚动的tbody的td里面的div。滚动条问题

4 个答案: