Почему контейнер не занимает всю высоту

Question

Я пытаюсь сделать страницу формы опроса. Я сделал div с id = "container", который содержит все элементы моего сайта. Код внизу и там 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

Используйте height: auto вместо height: 100%;, поскольку height: 100% занимает 100% области просмотра, но не содержимое. height: auto растягивается и расширяется для размещения всего содержимого.

Answer 2

Вы тоже можете это сделать:

* {
    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. Этот последний div, который использует класс 'input-div', не находится внутри контейнера div, поэтому, когда высота экрана становится меньше, он как бы «ломается».

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

U просто нужно отключить min-height: 100vh;

Answer 5

Попробуйте убрать высоту: 100%; на теге html