Div 没有占据它的高度
[英]Div is not taking its height
问题描述
I want to have two classes of <div> representing a cup.
我想要两个代表杯子的<div>类。 There is one big cup and a bunch of small cups.有一个大杯子和一堆小杯子。 But my problem is that the <div> is not taking the height I gave it.但我的问题是<div>没有达到我给它的高度。 Since I want to size down the smaller cups I do not want to use min-height for .cup in CSS.因为我想缩小较小的杯子，所以我不想在.cup中使用 .cup 的min-height 。
Here is my code:这是我的代码：
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); :root { --border-color: #144fc6; } * { box-sizing: border-box; } body { background-color: #3494e4; color: #fff; font-family: 'Montserrat', sans-serif; display: flex; flex-direction: column; align-items: center; height: 100vh; margin-bottom: 40px; } h1 { margin: 10px 0 0; } h3 { font-weight: 400px; margin: 10px 0; }.cup { background-color: #fff; border: 4px solid var(--border-color); color: var(--border-color); border-radius: 0 0 40px 40px; height: 330px; width: 150px; margin: 30px 0; display: flex; flex-direction: column; overflow: hidden; }.cup.cup-small { width: 50px; height: 95px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PK0gIY59xJ8Co8+NEgFZ+L0AZKjy+KY8iq0G4B3CyeY&wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous"> <link rel="stylesheet" href="style:css"> <title>Drink Water</title> </head> <body> <h1>Drink Water</h1> <h3>Goal. 2 Liters</h3> <div class="cup"> <div class="remained" id="remained"> <span id="'Liters">1.5L</span> <small>Remained</small> </div> <div class="percentage" id="percentage"> 20% </div> </div> <p class="text"> Select how many glasses of water tat you have drank. </p> <div class="cup cup-small full"> 250 ml </div> <div class="cup cup-small full"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <script src="script.js"></script> </body> </html>
Any idea why the container just takes some kind of min-height instead of the one I gave it?知道为什么容器只采用某种min-height而不是我给它的那个吗？
3 个解决方案
解决方案1
0 2023-01-14 17:19:32
So what helped was to wrap an additional div around all the small-cup divs and put its atrribute display to flex.因此，有帮助的是在所有小杯 div 周围包装一个额外的 div，并将其属性显示设置为 flex。 Still I am wondering why it did the job and why it did not work before.我仍然想知道为什么它完成了这项工作以及为什么它以前没有工作。 Because it even changed the height of the first div that represents the big one and which is not wrapped by the div I added.因为它甚至改变了代表大的第一个 div 的高度，它没有被我添加的 div 包裹。 I hope that makes sence.我希望这是有道理的。
解决方案2
0 已采纳 2023-01-14 17:39:31
Remove display flex from body tag.从 body 标签中移除 display flex。 If you explain what you need exactly, I can help you如果你准确地解释你需要什么，我可以帮助你
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap'); :root { --border-color: #144fc6; } * { box-sizing: border-box; } body { background-color: #3494e4; color: #fff; font-family: 'Montserrat', sans-serif; text-align: center; height: 100vh; margin-bottom: 40px; } h1 { margin: 10px 0 0; } h3 { font-weight: 400px; margin: 10px 0; }.container { display: flex; column-gap: 10px; justify-content:center; }.cup { background-color: #fff; border: 4px solid var(--border-color); color: var(--border-color); border-radius: 0 0 40px 40px; height: 330px; width: 150px; margin: 30px 0; overflow: hidden; }.cup.cup-small { width: 50px; height: 95px; }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css" integrity="sha512-1PK0gIY59xJ8Co8+NEgFZ+L0AZKjy+KY8iq0G4B3CyeY&wYHN3yt9PW0XpSriVlkMXe40PTKnXrLnZ9+fkDaog==" crossorigin="anonymous"> <link rel="stylesheet" href="style:css"> <title>Drink Water</title> </head> <body> <h1>Drink Water</h1> <h3>Goal. 2 Liters</h3> <div class="container"> <div class="cup"> <div class="remained" id="remained"> <span id="'Liters">1.5L</span> <small>Remained</small> </div> </div> <div class="percentage" id="percentage"> 20% </div> </div> <p class="text"> Select how many glasses of water tat you have drank. </p> <div class="container"> <div class="cup cup-small full"> 250 ml </div> <div class="cup cup-small full"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> <div class="cup cup-small"> 250 ml </div> </div> <script src="script.js"></script> </body> </html>
解决方案3
0 2023-01-14 17:57:42
You have a Hieght in your body css. Now remember, body is in a way superior, so the properties of body is being used.你的身体有一个Hieght现在记住，身体在某种程度上是优越的，所以身体的属性正在被使用。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.