Question

我目前正在设计一个图书网站，并且右侧希望有一个“目录”，该目录处于固定位置且可滚动。我将网站的标题设置为“ display：table-row”，并且类似地使用目录及其内部元素。（标题和各章的可滚动列表）据我了解，显示：表格行应使div元素填充剩余的高度，仅填充剩余的高度。 [1]但是，在这种情况下，内容继续在屏幕外显示，而不是允许用户滚动浏览内容。（您可以在此jsfiddle上看到问题：https://jsfiddle.net/chrmon2/9wzjckvn/6/）

我的CSS：

#container {
  height: 300px;
  border: 1px solid black;
}
#header {
  background: blue;
  display: table-row;
}
#toc h1 {
  background: red;
  display: table-row;
}
#toc #content {
  background: yellow;
  overflow-y: scroll;
  display: table-row;
}

这不是显示功能吗？表行还是我做错了什么？谢谢

https://www.whitebyte.info/programming/css/how-to-make-a-div-take-the-remaining-height

Answer 1

据我了解，您想要的效果如下：

有剩余空间时，拉伸目录项目；
如果空间太小，请开始滚动。

这是CSS Flexboxes的理想应用。 Flexbox允许您定义项目如何拉伸（或不拉伸），它们如何彼此对齐，如何包装等。

在这种情况下，我们将在此示例中为所有div使用弹性框。

.container, .toc, .content {
    display: flex;              /* begins flexbox layout */
    flex-direction: column;     /* Flexboxes can be aligned from left-to-right
                                   or from top-to-bottom. In this case, we want
                                   them to be top-to-bottom. */
    flex-grow: 1;               /* On .container, this does nothing. However, for
                                   children of Flexboxes, this tells them to grow
                                   if any space is still available. */
    min-height: 0;              /* For a more complicated reason, this is necessary
                                   to make flexboxes scroll correctly. This needs
                                   to be set on all the flexboxes in this example. */
}

.toc .content .item {
    flex-grow: 1;               /* Make items grow when there is room available */
}

.content {
    overflow-y: scroll;
}

您可以看到此at this JSFiddle的效果。

Answer 2

只需从((ImageView)findViewById(R.id.imageView1)).setImageDrawable(...);中删除display: table-row并添加：

#toc #content

高度可以根据您的要求。

显示：表格行不允许滚动

2 个答案: