保持flexbox容器和溢出的子元素在100%高度内。_编程开发

保持flexbox容器和溢出的子元素在100%高度内。

创始人

2024-11-21 17:01:42

0次

要保持 flexbox 容器和溢出的子元素在100%高度内，可以使用以下代码示例来解决：

HTML:


  Item 1
  Item 2
  Item 3
  Item 4

CSS:

.container {
  display: flex;
  flex-direction: column;
  height: 100vh; /* 设置容器高度为100%视窗高度 */
  overflow: auto; /* 添加滚动条，当内容溢出容器时显示滚动条 */
}

.item {
  flex: 0 0 auto; /* 子元素不会自动拉伸或收缩 */
  height: 100%; /* 子元素高度为100%容器高度 */
  border: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
}

在上面的代码中，我们首先将容器的高度设置为100%视窗高度（height: 100vh）。然后，通过设置子元素的高度为100%容器高度（height: 100%），确保子元素在容器内占满整个高度。如果子元素的内容超出容器的高度，将会显示滚动条（overflow: auto）。

注意，flexbox 容器的 flex-direction 属性被设置为 column，以确保子元素垂直排列。

上一篇：保持fitsSystemWindows="true"行为的情况下，在状态栏和导航栏下绘制内容。

下一篇：保持Flutter Dart流处于打开状态以监视模型的变化。

保持flexbox容器和溢出的子元素在100%高度内。

相关内容

热门资讯