为什么容器不占据整个高度

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拉伸和扩展以适应所有内容。