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

Question

I'm trying to make survey form page. I have made div with id="container" which contains every element on my site. Code Below and there https://codepen.io/pawe-micho/pen/GRoLJLY?editors=1100

CODE

 * { 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>

I want a container to be a big white stripe which takes entire height of html, but as you can see below, not whole container has got white background.

picture which shows container doesnt take whole height

I only want a picture with entire height of website whole time, I mean container should maintain entire height when It is fullscreen too.

enter code here

Answer 1

U just need to disable min-height:100vh;

Answer 2

Try removing the height:100%; on the html tag

Answer 3

try this.

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

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

I think problem was you were setting html,body. In this case it's enough to set just background-color for body of your page.

TIP: Dont use ID for styling. ID is mostly used in JavaScript or other programming languages. For styling use classes.

Answer 4

You could do this as well:

 * { 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>

I removed height from body and added a height using vh on container. I think this is good because if you want to add more things to the body then you can use for each section the height you want. Also in the html you have a container div and a input div. This last div that uses the class of 'input-div' is not inside the container div so when the height of the screen gets smaller it kinda "breaks".

Answer 5

Use height: auto instead of height: 100%; as height: 100% takes 100% of viewport but not content. height: auto stretches and expands to fit all content.