我目前正在做来自freecodecamp的一个调查表格项目，我的css遇到了一些问题(我一直发现它有点难，所以请对我宽容一些>；.<；).
这是我的html，缩写，因为它有点长(只显示基本部分):
<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>
和我的css:
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;
}
基本上，我希望div充当内容的不透明背景，而正文的背景是占据整个屏幕的图像，而div只占用指定的宽度.问题是，div的长度并没有占据高度的100%，尽管它位于css上.而表格的内容也溢于言表.
我可以用-{overflow:scroll}修复溢出，但我想知道是否有其他方法可以做到这一点？另外，如果内容在div中，为什么会发生这种情况？
我试着寻找其他答案，但还没有找到有用的解决方案.
What I tried:个
我试着用min-height代替height来表示身体，后来又用html,body表示，但都没有解决问题.我还用divtry 了这一点.
因为我希望div用作背景容器，所以我try 将其相对于Body放置在绝对位置，但我不确定如何正确地将其放置在我想要的位置(居中)，而且高度仍然不是100%.此外，我不确定这个标记是否会比将所有内容都放在div中更好(不是吗？):
<body>
<div></div>
{rest of the markup}
</body>
编辑:我添加了HTML的主体，因为我从 comments 中看到它可能会提供更多的上下文！对不起，如果太长了，让我知道，我会删除不太重要的部分:d