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

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

你只需要禁用 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

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

Answer 5

你也可以这样做：

* {
    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' 类的 div 不在容器 div 内，所以当屏幕的高度变小时它有点“中断”。