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.