html - 当 div 变小时，输入框必须调整大小

Question

我的问题如下:

我有一个包含多个输入字段的联系表单。输入字段位于正常页面上，大约是它们所在的 div 的一半。现在，当通过浏览器观察我的网页时，出现了问题。页面本身可以比输入字段小。

我想要的是:

它会调整大小以适应 div，而不是重叠/溢出到 div 之外。

我已经尝试在 SOF 和谷歌上搜索它，但要么我搜索的是错误的东西，要么就是找不到。

HTML:

<div id="contact-formulier">
    <form method="post" action="contact.php">
        <label>Naam*</label>
        <input name="naam" placeholder="Graham Neal" required>
    </form>
</div>

CSS:

input, textarea {
   width:439px;
   height:27px;
   background:#efefef;
   border:1px solid #dedede;
   padding:10px;
   margin-top:3px;
   font-size:0.9em;
   color:#3a3a3a;
   -moz-border-radius:5px;
   -webkit-border-radius:5px;
   border-radius:5px;
}

textarea {
   height:213px;
}

input:focus, textarea:focus {
   border:1px solid #97d6eb;
}

Answer 1

将表单宽度设置为 100%，然后将输入和文本区域宽度设置为 90% 左右。我希望这是您要寻求的结果。就这样:

form {
    width: 100%;
    float: left;
}
/* Style the text boxes */
input, textarea {
    width:90%;
    height:27px;
    background:#efefef;
    border:1px solid #dedede;
    padding:10px;
    ...
}