Survey Form Project: Div content overflow

HTML-CSS
1

Hey, so I’m creating a survey form for the HTML/CSS project, and I’m facing the following issue, my markup is in this format (abbreviated for readability):

<html>
 <body>
   <div>
      {all the content of the page, including the form}
   </div>
  </body>
</html>

The div is there so I could create sort of a container that takes up 60% width and 100% height, with a different background image for the body. The problem is, despite it taking up 100% of the height, the form is overflowing.

I’m not sure why this is happening, or how I could fix it. The only solution that seemed to work was to add div{overflow:scroll}, but I was wondering if I’m doing something else wrong.

Here is the CSS for reference:

html,
body {
  width: 100%;
  height: 100vh;
}
body {
  margin: 0;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  background: url("{image here}");
  background-size: 100%;
  background-repeat: no-repeat;
  min-height: 100%;
  overflow: scroll;
}

div {
  width: 60%;
  height: 100%;
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.4);
  
}

h1,
p {
  text-align: center;
}

form {
  margin: 0 auto;
  width: 60vw;
  max-width: 500px;
  min-width: 300px;
  height: 60vh;
}

fieldset {
  border: none;
}

label {
  display: block;
  padding: 10px;
}

Thank you in advance :smiley:

2

Try using min-height on the body instead of height.

3

I have min-height set to 100% in the body, and for html and body set height to 100%. But nothing changed.

I tried removing the min-height for only the body and applied it to html and body, still it’s the same:

html,
body {
  width: 100%;
  min-height: 100%;
}
body {
  margin: 0;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  background: url({image here});
  background-size: 100%;
  background-repeat: no-repeat;
  overflow: scroll;
  overflow-x: hidden;
}
4

You changed the unit. Keep it at vh

Please post all the HTML so we can actually test your code.

5

My bad, here it is:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="container">
            <h1 id="title">Survey Form</h1>
            <p id="description">Tell us how your experience was like!</p>
            <form method="post" action="" id="survey-form">
                <fieldset>
                    <label for="name-label">Name <input id="name-label" name="name" type="text" placeholder="Please enter your name"  required/></label>
                    <label for="email-label">Email <input id="email-label" name="email" type="email" placeholder="Please enter your email"  required/></label>
                    <label for="number-label">Age <input id="number-label" name="number" type="number" placeholder="Please enter your age" min="16" max="120" required/></label>       
                </fieldset>
                <fieldset>
                <legend>Would you recommend the event to a friend? (required)</legend>
                <select id="dropdown">
                    <option value="">(select an option)</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
                </fieldset>
                <fieldset>
                    <legend>Ticket Type (required)</legend>
                    <label for="normal-ticket"><input id="normal-ticket" value="normal-ticket" name="ticket-type" type="radio" checked /> Normal</label>
                    <label for="vip-ticket"><input id="vip-ticket" name="ticket-type" value="vip-ticket" type="radio" /> VIP Pass</label>
                    </fieldset>
                <fieldset>
                    <legend>What did you purchase?</legend>
                    <label for="snacks">
                        <input id="snacks" type="checkbox" value="snacks">
                    Snacks
                    </label>
                    <label for="drinks-alcoholic">
                        <input id="drinks-alcoholic" type="checkbox" value="drinks-alcoholic">
                    Drinks (alcoholic)
                    </label>
                    <label for="drinks-non-alcoholic">
                        <input id="drinks-non-alcoholic" type="checkbox" value="drinks-non-alcholic">
                    Drinks (non-alcoholic)</label>
                    <label for="food">
                        <input id="food" type="checkbox" value="food">
                    Food
                    </label>
                    <label for="merch">
                    <input id="merch" type="checkbox" value="merch">
                    Merchandise
                    </label>
                </fieldset>
                <fieldset>
                    <label>Any tips for next time? 
                        <textarea name="tips"></textarea>
                    <label>
                </fieldset>
                <input id="submit" type="submit" value="Submit"/>
            </form>
        </div>
    </body>
</html>
6

Use min-height on the form as well.

7

What’s the difference between vh and using a %?

I changed all the height units to vh, and the div increased in height a little bit.

9

UPDATE:

I figured out what was causing the overflow and extra blank spaces around the div.

The body had some extra margin, apparently, that I caught when inspecting the page. So, once I set body{margin: 0;} the div took up 100vh!

Also, I made only one main-container for all the items, and shifted the body’s CSS properties to this one container. I’m not done yet with this part, since I need to fix the other element’s design/layout, but this part is out of the way (for now haha).

Here’s the updated CSS for now, which has the divs and body fixed up (ignore the other elements):

html,
body {
  width: 100%;
  min-height: 100%;
}

body {
  margin: 0;
}

.main-container {
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  display: block;
  font-family: "Gill Sans", sans-serif;
  font-size: 18px;
  background: url("https://images.unsplash.com/photo-1519751138087-5bf79df62d5b?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D");
  background-size: cover;
  background-repeat: no-repeat;
  overflow-y: scroll;
}

.container {
  height: 100vh;
  width: 60vw;
  background-color: rgba(255, 255, 255, 0.4);
  margin: 0 auto;
  overflow-x: hidden;
}

h1,
p {
  text-align: center;
}

form {
  margin: 0 auto;
  width: 60vw;
  min-height: 100vh;
  background-color: rgba(255, 255, 255, 0.4);
  overflow-x: hidden;
}

fieldset {
  border: none;
}

label {
  display: block;
  padding: 10px;
}

input[type="submit"] {
  margin: 0 auto;
}

And the HTML fixed up:

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Survey Form</title>
    <link rel="stylesheet" href="styles-form.css" />
    </head>
    <body>
        <div class="main-container">
            <h1 id="title">Survey Form</h1>
            <p id="description">Tell us how your experience was like!</p>
            <form method="post" action="" id="survey-form">
                <fieldset>
                    <label for="name-label">Name <input id="name-label" name="name" type="text" placeholder="Please enter your name"  required/></label>
                    <label for="email-label">Email <input id="email-label" name="email" type="email" placeholder="Please enter your email"  required/></label>
                    <label for="number-label">Age <input id="number-label" name="number" type="number" placeholder="Please enter your age" min="16" max="120" required/></label>       
                </fieldset>
                <fieldset>
                <legend>Would you recommend the event to a friend? (required)</legend>
                <select id="dropdown">
                    <option value="">(select an option)</option>
                    <option value="Yes">Yes</option>
                    <option value="No">No</option>
                </select>
                </fieldset>
                <fieldset>
                    <legend>Ticket Type (required)</legend>
                    <label for="normal-ticket"><input id="normal-ticket" value="normal-ticket" name="ticket-type" type="radio" checked /> Normal</label>
                    <label for="vip-ticket"><input id="vip-ticket" name="ticket-type" value="vip-ticket" type="radio" /> VIP Pass</label>
                    </fieldset>
                <fieldset>
                    <legend>What did you purchase?</legend>
                    <label for="snacks">
                        <input id="snacks" type="checkbox" value="snacks">
                    Snacks
                    </label>
                    <label for="drinks-alcoholic">
                        <input id="drinks-alcoholic" type="checkbox" value="drinks-alcoholic">
                    Drinks (alcoholic)
                    </label>
                    <label for="drinks-non-alcoholic">
                        <input id="drinks-non-alcoholic" type="checkbox" value="drinks-non-alcholic">
                    Drinks (non-alcoholic)</label>
                    <label for="food">
                        <input id="food" type="checkbox" value="food">
                    Food
                    </label>
                    <label for="merch">
                    <input id="merch" type="checkbox" value="merch">
                    Merchandise
                    </label>
                </fieldset>
                <fieldset>
                    <label>Any tips for next time? 
                        <textarea name="tips"></textarea>
                    <label>
                </fieldset>
                <input id="submit" type="submit" value="Submit"/>
            </form>
        </div>
    </body>
</html>

If anyone has any suggestions on how this markup/CSS can be improved, or more readable, let me know!!

Thank you to everyone who helped me out :smiley:

If anything changes, I’ll update here, and once I’m done I’ll post it.

10

% is based on parent elements, v* (all viewport units) is based on the viewport. To use % the parent must have some dimension the child can use for the calculation. Element dimensions calculated from viewport units do not rely on parent element dimensions. As an aside, do not use the color of the body/html elements as an indication of their dimensions, they can be 0 height and still show the background color extending the full page.

In almost all cases you want to use min-* values to avoid the content overflowing. If you do not allow containers to grow as needed their content will overflow. Just as you want to use max-* to constrain the most you want an element to grow but still allow it to shrink down.

The body element has a default margin applied by the browser’s default styles. It does not cause overflow. An overflow is when children/content extends beyond the parent container. Think of content as water in a cup, if you have more water than there is room for in the cup it will overflow (spill out of) the cup.

13

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.