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

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，但正如您在下面看到的，并不是整个容器都有白色背景。

picture which shows container doesnt take whole height

我只想要一张整个网站高度的图片，我的意思是容器在全屏时也应该保持整个高度。

enter code here

Answer 1

尝试删除 height:100%；在 html 标签上

Answer 2

试试这个。

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

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

我认为问题出在您设置 html,body. 在这种情况下，只需为页面主体设置背景色即可。

提示：不要将 ID 用于样式。 ID 主要用于 JavaScript 或其他编程语言。对于样式使用类.

Answer 3

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

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>

我从 body 中删除了高度，并在容器上使用 vh 添加了一个高度。我认为这很好，因为如果您想向 body 添加更多内容，那么您可以为每个部分使用您想要的高度。同样在 html 中，您有一个容器 div 和一个输入 div。使用 'input-div' 的 class 的最后一个 div 不在容器内 div 所以当屏幕的高度变小时它有点“破裂”。

Answer 5

使用 height: auto 而不是 height: 100%;，因为 height: 100% 占用 100% 的视口，但不占用内容。 height: auto 拉伸和扩展以适合所有内容。

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

Why doesn't container take up entire height

html

css

height