Div 没有占据它的高度
[英]Div is not taking its height
问题描述
我想要两个代表杯子的<div>类。 有一个大杯子和一堆小杯子。 但我的问题是<div>没有达到我给它的高度。 因为我想缩小较小的杯子，所以我不想在.cup中使用 .cup 的min-height 。
这是我的代码：
@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>
知道为什么容器只采用某种min-height而不是我给它的那个吗？
3 个解决方案
解决方案1
0 2023-01-14 17:19:32
因此，有帮助的是在所有小杯 div 周围包装一个额外的 div，并将其属性显示设置为 flex。 我仍然想知道为什么它完成了这项工作以及为什么它以前没有工作。 因为它甚至改变了代表大的第一个 div 的高度，它没有被我添加的 div 包裹。 我希望这是有道理的。
解决方案2
0 已采纳 2023-01-14 17:39:31
从 body 标签中移除 display flex。 如果你准确地解释你需要什么，我可以帮助你
@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
你的身体有一个Hieght现在记住，身体在某种程度上是优越的，所以身体的属性正在被使用。
Div是否未将其父级的完整高度与`vh`一起定位？
[英]Div is not taking the full height of its parent positioned with `vh` unite?
我不明白为什么我的高度为 auto 的 div 占据了其父级的全高
[英]I don't understand why my div with height auto is taking the full height of its parent
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.