Currently, I am working on a survey form project from freecodecamp and encountering some challenges with my CSS (it's been a bit tricky for me, so please bear with me >.<).
Here is a shortened version of the essential HTML code:
<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>
And here is the CSS I have used:
html,
body {
width: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: "Gill Sans", sans-serif;
font-size: 18px;
background: url({base64 image url here});
background-size: cover;
background-repeat: no-repeat;
overflow: scroll;
overflow-x: hidden;
}
div {
width: 60%;
height: 100%;
margin: 0 auto;
background-color: rgba(255, 255, 255, 0.4);
display: block;
}
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;
}
input[type="submit"] {
margin: 1em auto;
}
In essence, I aim for the div to act as a semi-transparent background for the content, while the body background features a full-screen image, and the div only occupies the specified width. However, I am facing issues where the div's height does not fill the entire screen despite being set to 100% in the CSS. Furthermore, the form content is overflowing.
I managed to address the overflow issue by using {overflow: scroll}. But I wonder if there are alternative solutions to this problem. Moreover, why is this occurring when the content is contained within the div?
I attempted to use min-height instead of height for both the body and later for html,body, but it did not resolve the issue. I also experimented with setting the div position to absolute relative to the body to guarantee that its positioning is centered properly. However, the height remained unchanged at less than 100%. Additionally, I am uncertain whether structuring the markup differently, as shown below, would be advantageous:
<body>
<div></div>
{rest of the markup}
</body>
Edit: In response to feedback, I added the body of the HTML code for more context. If it is too lengthy, please let me know, and I will eliminate the less relevant parts :D