为什么 height 属性在这个 div 上不起作用？
[英]Why height property does not work on this div?
问题描述
I am writing a website with HTML and CSS. I just want a lot of div side by side.
我正在用 HTML 和 CSS 编写一个网站。我只想要并排放置很多 div。
This is my code这是我的代码
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
when I change the height of box class, it does not work, but when I change the width property, it works.当我更改box class 的高度时，它不起作用，但是当我更改宽度属性时，它起作用了。 I change the flex-direction , the height property also does not work.我改变了flex-direction ， height 属性也不起作用。
What is the problem?问题是什么？ How can I get the height which I want?我怎样才能得到我想要的高度？ Please help me with this.请帮我解决一下这个。 Thanks a lot.非常感谢。
3 个解决方案
解决方案1
3 2022-09-22 08:09:02
You set the body element to display: flex and height: 100vh so the boxes are laid out using flex layout within a constrained height.您将body元素设置为display: flex和height: 100vh ，因此框在受约束的高度内使用 flex 布局进行布局。
By default, flex-shrink is 1 so they shrink to fit.默认情况下， flex-shrink为1 ，因此它们会收缩以适应。
You need to change the shrink rule to 0 if you want the height you specified for the boxes to take priority over the space available for them.如果您希望为框指定的高度优先于它们的可用空间，则需要将收缩规则更改为0 。
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { flex-shrink: 0; color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
… or remove the restriction on the body height so they don't need to shrink to fit the space you allocated for them. … 或者取消对身体高度的限制，这样它们就不需要缩小以适应您为它们分配的空间。
body { min-height: 100vh; margin: 0; padding: 0; font-family: "Roboto", sans-serif; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { color: #fff; background-color: steelblue; height: 2000px; width: 300px; padding: 20px; display: flex; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
解决方案2
1 2022-09-22 08:09:20
When using flex-direction: row (default) , items will be aligned horizontally.使用flex-direction: row (default)时，项目将水平对齐。 To adjust horizontal space for items in this mode you should use flex-basis , flex-grow and flex-shrink eg flex:1;要在此模式下调整项目的水平空间，您应该使用flex-basis 、 flex-grow和flex-shrink例如flex:1; and use height in the normal manner,并以正常方式使用高度，
When you are using flex-direction: column the items will be aligned vertically.当您使用flex-direction: column时，项目将垂直对齐。 When items are "rotated" vertically, flex-basis , flex-grow and flex-shrink will now affect the vertical space "height" and height property will now affect the horizontal space "width" of the items.当项目垂直“旋转”时， flex-basis 、 flex-grow和flex-shrink现在将影响垂直空间“高度”，而 height 属性现在将影响项目的水平空间“宽度”。
EXAMPLE例子
body { margin: 0; padding: 0; font-family: "Roboto", sans-serif; height: 100vh; display: flex; flex-direction: column; align-items: center; background-color: #f6f6f6; } h1 { margin: 10px; }.box { display: flex; flex:0 0 200px; width: 300px; padding: 20px; color: #fff; background-color: steelblue; align-items: center; justify-content: center; margin: 20px; border-radius: 10px; font-size: 20px; box-shadow: 2px 4px 5px rgba(0, 0, 0, 0.3); }
<body> <h1>Scroll Animation</h1> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> <div class="box"> <h2>content</h2> </div> </body>
解决方案3
-1 2022-09-22 08:12:36
in the block, the height of the case is 100vh and due to the display flex limits the maximum height, removing it, you can increase the height arbitrarily.在块中，外壳的高度为 100vh，由于显示 flex 限制了最大高度，删除它，您可以任意增加高度。 and generally better to write max-height: 2000px;通常最好写 max-height: 2000px; height: 100%;高度：100%；
解决方案4
-1 2022-09-22 08:14:46
Try adding flex-shrink to.box尝试将 flex-shrink 添加到.box
flex-shrink: 0;
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.