css - 需要在父级中设置高度以使拉伸(stretch)内容内部可滚动-6ren

css - 需要在父级中设置高度以使拉伸(stretch)内容内部可滚动

转载作者：行者123 更新时间：2023-11-27 22:54:50

25

4

我是一名日本工程师，我的英语不好，抱歉。

我想让“.main-content”可滚动。

我做到了。

它工作正常。

但是我有一个问题。

为什么我必须将 height: 0; 设置为类“.body”。

这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>

  <style type="text/css">
    * {
      margin: 0;
      box-sizing: border-box;
    }
    body {
      width: 100vw;
      height: 100vh;
      padding: 32px;
      overflow: hidden;
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
      height: 100%;
    }
    .heading {
      background-color: cornflowerblue;
    }
    .body {
      display: flex;
      flex-grow: 1;
      height: 0;
    }
    .left-nav {
      flex-basis: 200px;
      max-height: 300px;
      overflow-y: auto;
      background-color: lightblue;
    }
    .left-nav-item, .main-content-item {
      height: 80px;
      width: 80px;
      margin: 8px;
      background-color: lightgray;
    }
    .main-content {
      flex-grow: 1;
      overflow-y: auto;
      background-color: lightsteelblue;
    }
    .footing {
      background-color: lightseagreen;
    }
  </style>

</head>
<body>
  <div class="container">
    <div class="heading">
      heading
    </div>
    <div class="body">
      <div class="left-nav">
        <div class="left-nav-item">
          left-nav-item1
        </div>
        <div class="left-nav-item">
          left-nav-item2
        </div>
        <div class="left-nav-item">
          left-nav-item3
        </div>
        <div class="left-nav-item">
          left-nav-item4
        </div>
        <div class="left-nav-item">
          left-nav-item5
        </div>
        <div class="left-nav-item">
          left-nav-item6
        </div>
        <div class="left-nav-item">
          left-nav-item7
        </div>
        <div class="left-nav-item">
          left-nav-item8
        </div>
      </div>
      <div class="main-content">
        <div class="main-content-item">
          main-content-item1
        </div>
        <div class="main-content-item">
          main-content-item2
        </div>
        <div class="main-content-item">
          main-content-item3
        </div>
        <div class="main-content-item">
          main-content-item4
        </div>
        <div class="main-content-item">
          main-content-item5
        </div>
        <div class="main-content-item">
          main-content-item6
        </div>
        <div class="main-content-item">
          main-content-item7
        </div>
        <div class="main-content-item">
          main-content-item8
        </div>
      </div>
    </div>
    <div class="footing">
      footing
    </div>
  </div>
</body>
</html>

“.main-content”按“.body”的默认值垂直拉伸(stretch)，align-content: stretch。

但是如果“.main-content”的内部溢出，“.main-content”的高度会变大。

而且，overflow-y: auto; 不起作用。

但是如果我给 height: 0;(0 并不重要。除了 auto 之外的一些值是需要的。)给类“.body”，“.main-content”得到适当的高度和变得可滚动。

它现在可以正常工作了，但我想知道为什么我需要给类“.body”height: 0;。

最佳答案

欢迎来到 Stack overflow!

The overflow property specifies what should happen if content overflows an element's box

.

此属性指定当元素的内容太大无法容纳在指定区域时是裁剪内容还是添加滚动条。

Note: The overflow property only works for block elements with a specified height.

这是 overflow 的默认行为，如果你没有给出任何特定的高度，元素应该溢出一些高度，内容不会溢出。

In order for overflow to work on an element’s content, the element needs to have a definite measurement, otherwise, the element container will keep on expanding to accommodate as many content elements it can have or no matter the content’s size, but if the container element has a set height or a cap height ( max-height), once its content reaches those limits, it will follow the overflow rule, which in case of scroll, it will hide any content that should be surpassing the height of the container, and it will allow us to see it by dragging a scroll bar.

详细说明的引用链接

www.w3schools.com

关于css - 需要在父级中设置高度以使拉伸(stretch)内容内部可滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59297896/

25

4

0

文章推荐： c++ - 同一个类中的迭代器和 const_iterator 的问题

文章推荐： C++ 和文件输出

文章推荐： html - 有没有办法将导航栏中 li 下的下拉菜单居中？

文章推荐： c++ - 将文本转换为数组

html - 拉伸(stretch)水平 div(中间 div 拉伸(stretch))
我想创建一个随页面宽度变化的页眉。我的标题由三部分组成，固定宽度的两侧和可拉伸(stretch)的中间部分。我使用 displa
html - 允许父 div 被一些 child 拉伸(stretch)，但不能被其他 child 拉伸(stretch)
我正在尝试在导航栏下方创建一列内容，以便内容的宽度与导航栏的宽度完全匹配。事实证明这比我预期的要困难。给定这样的东西: link
lua - 拉伸(stretch)物体
我有一个大小为 12*30 的字符串的图像。我想创建一个动画，让它给人一种拉伸(stretch)字符串的感觉。我通过缩放图像来做到这一点，但我面临的问题是缩放图像没有发生碰撞。它仅出现在原始图像大小的
Silverlight 拉伸(stretch)子元素以填充父容器？
在 Silverlight 中，如何拉伸(stretch) Line 的宽度以填充作为子元素的 StackPanel 的宽度？更喜欢 XAML 解决方案，而不是代码隐藏。这是我在 WPF 中的操作方法
qt - 拉伸(stretch)元素以包含所有子元素
QML 怎么可能？自动拉伸(stretch)元素以使其所有子元素都适合它？以及如何指定间距？例如，我想在文本周围有一个矩形。矩形应该有一些内部间距。如果我写以下内容，则矩形的大小为 0,0。 Rec
matplotlib:拉伸(stretch)图像以覆盖整个图形
我已经习惯了使用 matlab，现在正在尝试转换 matplotlib 和 numpy。 matplotlib 中是否有一种方法可以让您绘制的图像占据整个图形窗口。 import numpy as n
wpf - 拉伸(stretch)分离器不起作用
我有一个(简化的)2x2 网格，里面有三个控件。左控制在两行上延伸。
python - 拉伸(stretch)列表以适应彼此的尺寸
假设我有 3 个大小不匹配的列表，[3, 7, 6]、[12, 67, 89, 98] 和 [1, 2, 3, 4, 5, 6, 7]我想要一个函数来执行此操作: >>> stretch([3, 7,
c# - 拉伸(stretch)图像的宽度和高度
如果 Image 被 Stretched，我可以获取 Height 和 Width 吗>UniformToFill? 我尝试了 Width 和 Height 属性，但它们始终是 NaN。最佳答案如
android - 拉伸(stretch)微调器图标
当我为微调器使用我自己的背景主题时，它是拉伸(stretch)图标。我的微调器代码是: 我的 spinner.xml 是: 和我从 sdk 4 复制的图
c# - 纹理映射 - 拉伸(stretch)
我正在尝试在 OpenGL 中创建一个简单的 GUI。我创建了一张图片，以便我可以引用它并使解释更简单: 当我将按钮 (32x32) 的纹理应用到大小为 120x20 的四边形多边形(即不是矩形作为纹
Android textureView 拉伸(stretch)
SurfaceTexture 预览被拉伸(stretch)了!我正在开发一个 camera2 应用程序。每个设备都工作不好。视频和照片的预览被拉伸(stretch)。 public class Cam
android - 拉伸(stretch)图像按钮
我使用一些ImageButtons 创建了一个Android layout。我的布局在小屏幕(例如 3.6 英寸到 4.2 英寸)上运行良好，但是当我在 7 英寸或 9 英寸平板电脑上使用我的应用程序
android - 拉伸(stretch) GridView
我在拉伸(stretch) GridView 以适应显示宽度时遇到问题。任何人都知道如何解决这个问题？我希望 GridView 占据整个宽度，包括蓝色标记的字段(见下图)
Android:拉伸(stretch)位图以填满整个屏幕
我使用位图作为 Activity 的背景。自定义背景代码为: 但是它位于中间，并没有占据整个屏幕空间。我怎样才能让它填满所有可用空间？我尝试将宽度和高度设置为 fill_parent。谢谢最
iOS 拉伸(stretch)以适应所有屏幕尺寸？
所以我最近一直在为 iOS 开发应用程序，但遇到了一个难题。我正在制作一个迷你合成器，然后开始制作 GUI。我开始制作键盘(目前为 2 个 Octave )并测量了白键的大致长度。一切都很好，直到我在
html - 拉伸(stretch)图像
好的，所以我在 slider 内有一个图像，但它不能正确缩放。先小后伸，想一直伸到底，怎么实现？看一下截图(忽略第二张截图中的红色部分): 还有CSS: .slider-wrapper {
html - 拉伸(stretch)容器高度以适应屏幕
我有下面的 HTML，我希望容器 div 拉伸(stretch)到窗口的整个高度。这对 wine 有效，但是当您移除容器内的两个蓝色 div 时会发生什么？容器延伸到其中蓝色 div 的底部，但不会延
css - 拉伸(stretch)高度到容器
我正尝试在 this example 之后制作背景，但我需要嵌套 2 个容器。我的代码看起来像这样: XHTML:
SwiftUI:拉伸(stretch)背景图像以填充
这是关于用颜色填充背景。我正在构建 this project 的 SwiftUI 版本.这是一个选项卡式应用程序(测试工具)。 This is my Working Project 我要做的第一件事

首页

博学

6Ren·AI

商城

css - 需要在父级中设置高度以使拉伸(stretch)内容内部可滚动