Html CSS柔性包裹内容超过身体高度时的额外间距_Html_Css_Flexbox_Height

Html CSS柔性包裹内容超过身体高度时的额外间距

html css

Html CSS柔性包裹内容超过身体高度时的额外间距,html,css,flexbox,height,Html,Css,Flexbox,Height,我有flex wrap div和一些物品在里面。但当屏幕变小时，身体的高度就不能跟随屏幕的高度，也不能在底部留出空间。为什么会发生，如何解决 index.html <!doctype html> <html lang="ko" class="bg-orange"> <head> ... </head> <body> <div class="project"> <div class="p

我有flex wrap div和一些物品在里面。但当屏幕变小时，身体的高度就不能跟随屏幕的高度，也不能在底部留出空间。为什么会发生，如何解决

index.html

<!doctype html>
<html lang="ko" class="bg-orange">
<head>
    ...
</head>
<body>
    <div class="project">
        <div class="prototype-box">
            1
        </div>
        <div class="prototype-box">
            2
        </div>
        <div class="prototype-box">
            3
        </div>
    </div>

您可以使用

px

来

height

表示绝对高度。例如，200px在任何屏幕上都是200像素。因此，如果车身高度较小，则默认情况下会显示

600px

（

200px+200px+200px

）滚动条（

overflow-y

）

如果您想让它们适合

身体高度

，则必须将

%/vh

设置为

高度

百分比（%）：相对于父值

视口高度（vh）：相对于视口的大小（基本上是浏览器窗口）。
body，html{ 保证金：0；填充：0；身高：100%；颜色：#fff； } .项目{ 显示器：flex；柔性包装：包装；证明内容：中心； } .原型箱{ 边框：1px纯黑；宽度：400px；高度：32vh； }

1. 2. 3.
尽量不要触摸主体，将flex div插入包装器div中。这样可以设置间距。你可以在这里参考我的钢笔

body，html{ 保证金：0；填充：0；身高：100%；颜色：#fff； } 包装{/*添加此包装*/ 背景色：#dddddd；利润率：10%0； } .项目{ 显示器：flex；柔性包装：包装；证明内容：中心； /*在下面添加代码*/ 背景色：红色；宽度：75%；利润率：5%自动；弯曲方向：立柱； } .原型箱{ 背景颜色：蓝色；高度：200px； /*添加此代码*/ 宽度：自动；利润率：15px； }

1. 2. 3.
之所以会发生这种情况，是因为您将
主体
限制为高度：html的100%，而限制为高度：屏幕的100%。要解决此问题，只需在车身内使用
min height
而不是
height
：

html{ 保证金：0；填充：0；身高：100%；颜色：#fff； } 身体{ 保证金：0；填充：0；最小高度：100%；边框：1px纯绿色； } .项目{ 显示器：flex；柔性包装：包装；证明内容：中心； } .原型箱{ 宽度：400px；高度：200px；边框：1px纯红； }

1. 2. 3.
您为框设置了一个
px
高度，尝试给它们这样的值：
高度：32vh
@15009;נמה我不想更改内容的高度。只是想让身体高度跟随内容的总高度。但是总的内容高度比身体长。。。您必须使用
%
或
vh
将其安装到主体上，请参见此处：@SooJungChae如果您移除
高度：100%
主体将跟随项目的高度。。。是否要缩小视口中的原型框es？有关更多帮助，请告诉我：） body, html { margin: 0; padding: 0; height: 100%; color: #fff; } .project { display: flex; flex-wrap: wrap; justify-content: center; } .prototype-box { width: 400px; height: 200px; }