為什么容器不占據整個高度

Question

我正在嘗試制作調查表格頁面。 我用 id="container" 制作了 div，其中包含我網站上的每個元素。 代碼如下https://codepen.io/pawe-micho/pen/GRoLJLY?editors=1100

代碼

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; color: #black; background-color: #202020; } #container { height: 100%; max-width: 650px; margin: 0 auto; background-color: #fff; }

 <div id="container"> <header id="title"> <h1>Software World</h1> <p id="Description">Entertainment which creates software for people</p> </header> <form action="send_it_somewhere.html" id="survey-form" method="POST"> <div class="input-div"> <label for="name" id="name">Name</label> <input type="text" id="name" name="name" required> </div> <div class="input-div"> <label for="email" id="email">E-mail</label> <input type="email" id-"email" name="email" required> </div> <div class="input-div"> <label for="age" id="age">Age</label> <input type="number" id="age" name="age" min="1" max="100"> </div> <div class="input-div"> <label for="dropdown">How do you want to pay</label> <p>(Hold ctrl and click to tick multiple)</p> <select name="dropdown" id="dropdown"> <option value="all">All at once</option> <option value="months12">12 months</option> <option value="months6">6 months</option> <option value="Other">Other</option> </select> </div> <div class="input-div"> Gender <div> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"> </div> </div> <div class="input-div"> <p>What would you like to have in your software</p> <label for="pc_system">Access on PC</label> <input type="checkbox" name="pc_system" id="pc_system" value="pc_system"> <div class="blank-div"></div> <label for="android-system">Access on Android</label> <input type="checkbox" name="android-system" id="android-system" value="android-system"> <div class="blank-div"></div> <label for="ios-system">Access on IOS</label> <input type="checkbox" name="ios-system" id="io-system" value="ios-system"> <div class="blank-div"></div> <label for="online_mode">Online Mode</label> <input type="checkbox" name="online_mode" id="online_mode" value="online_mode"> <div class="blank-div"></div> <label for="payment">Payment</label> <input type="checkbox" name="payment" id="payment" value="payment"> <div class="blank-div"></div> <label for="making_accounts">Option of making accounts</label> <input type="checkbox" name="making_accounts" id="making_accounts" value="making_accounts"> <div class="blank-div"></div> <label for="support">24/7 Support</label> <input type="checkbox" name="support" id="support" value="support"> <div class="blank-div"></div> </div> <div class="input-div"> <label for="question">Ask a question</label> <textarea name="question" id="question"></textarea> </div> <button type="submit">Submit</button> <button type="reset">Reset</button> </form> </div>

我想要一個容器是一個大的白色條紋，它占據了 html 的整個高度，但正如你在下面看到的，不是整個容器都有白色背景。

顯示容器不占整個高度的圖片

我只想要整個網站整個高度的圖片，我的意思是容器在全屏時也應該保持整個高度。

enter code here

Answer 1

你只需要禁用 min-height:100vh;

Answer 2

嘗試刪除高度：100%； 在 html 標簽上

Answer 3

嘗試這個。

body {
  color: #black;
  background-color: #202020;
}

#container {
  height: 100%;
  max-width: 650px;
  margin: 0 auto;
  background-color: #fff;
}

我認為問題是您正在設置 html,body。 在這種情況下，只需為頁面正文設置背景顏色就足夠了。

提示：不要使用 ID 進行樣式設置。 ID 多用於 JavaScript 或其他編程語言。 對於樣式使用類。

Answer 4

你也可以這樣做：

 * { margin: 0; padding: 0; box-sizing: border-box; } html, body { color: #black; background-color: #202020; }.input-div{ background-color: #fff; } #container { height: 100vh; max-width: 650px; margin: 0 auto; background-color: #fff; }

 <div id="container"> <header id="title"> <h1>Software World</h1> <p id="Description">Entertainment which creates software for people</p> </header> <form action="send_it_somewhere.html" id="survey-form" method="POST"> <div class="input-div"> <label for="name" id="name">Name</label> <input type="text" id="name" name="name" required> </div> <div class="input-div"> <label for="email" id="email">E-mail</label> <input type="email" id-"email" name="email" required> </div> <div class="input-div"> <label for="age" id="age">Age</label> <input type="number" id="age" name="age" min="1" max="100"> </div> <div class="input-div"> <label for="dropdown">How do you want to pay</label> <p>(Hold ctrl and click to tick multiple)</p> <select name="dropdown" id="dropdown"> <option value="all">All at once</option> <option value="months12">12 months</option> <option value="months6">6 months</option> <option value="Other">Other</option> </select> </div> <div class="input-div"> Gender <div> <label for="male">Male</label> <input type="radio" name="gender" id="male" value="male"> <label for="female">Female</label> <input type="radio" name="gender" id="female" value="female"> </div> </div> <div class="input-div"> <p>What would you like to have in your software</p> <label for="pc_system">Access on PC</label> <input type="checkbox" name="pc_system" id="pc_system" value="pc_system"> <div class="blank-div"></div> <label for="android-system">Access on Android</label> <input type="checkbox" name="android-system" id="android-system" value="android-system"> <div class="blank-div"></div> <label for="ios-system">Access on IOS</label> <input type="checkbox" name="ios-system" id="io-system" value="ios-system"> <div class="blank-div"></div> <label for="online_mode">Online Mode</label> <input type="checkbox" name="online_mode" id="online_mode" value="online_mode"> <div class="blank-div"></div> <label for="payment">Payment</label> <input type="checkbox" name="payment" id="payment" value="payment"> <div class="blank-div"></div> <label for="making_accounts">Option of making accounts</label> <input type="checkbox" name="making_accounts" id="making_accounts" value="making_accounts"> <div class="blank-div"></div> <label for="support">24/7 Support</label> <input type="checkbox" name="support" id="support" value="support"> <div class="blank-div"></div> </div> <div class="input-div"> <label for="question">Ask a question</label> <textarea name="question" id="question"></textarea> </div>

我從正文中刪除了高度，並在容器上使用 vh 添加了一個高度。 我認為這很好，因為如果您想為身體添加更多東西，那么您可以為每個部分使用您想要的高度。 同樣在 html 中，您有一個容器 div 和一個輸入 div。 最后一個使用“input-div”的 class 的 div 不在容器 div 內，因此當屏幕高度變小時它有點“中斷”。

Answer 5

使用height: auto代替height: 100%; as height: 100%占用視口的 100%，但不占用內容。 height: auto拉伸和擴展以適應所有內容。