Question

我想显示一个固定标题的可滚动表格作为网格袋布局。

因此，我创建了一个外部容器，第一行用于标题，第二行用于数据。

问题是原本打算用于滚动条的内部容器忽略了外部容器的边界。

$ docker ps # get the id of the running container
$ docker stop <container> # kill it (gracefully)

#maincontainer {
  height:500px;
  background-color:lightgrey;
}

#innercontainer {
  height:100%;
   overflow-y: auto;
}

#headerrow {
  background-color:grey;
  height:200px;
}

在该代码段中，浅灰色容器是外部容器，具有完整列表的大小。

深灰色是标题。并且下面的数据应放入浅灰色框中，并在右侧显示一个滚动条。

感谢您的帮助。

Answer 1

您已将#innercontainer的高度设置为100％，但未将其设置为任何相对值，因此在这种情况下它将采用主体的高度。这样的事情应该会帮助您：

#maincontainer {

 position:relative;
  height:500px;
  background-color:lightgrey;
}

#innercontainer {
  height:100%;
   overflow: scroll;
   overflow-x: hidden;
}

#listrow {
  positon: relative;
  height: calc(100% - 50px);
}

#headerrow {
  background-color:grey;
  height:50px;
}

作为附带说明，bootstrap附带了一些不错的table styling，我认为这是您尝试创建的东西的好用例。

Answer 2

您可以添加此代码CSS

#listrow {
  
  background-color:lightgrey;
}

引导网格袋容器忽略边界

2 个答案: