我一直在研究响应式布局和表单。我对目前所拥有的感到非常满意:从移动设备到宽屏，它都能很好地工作；见下文。 (目前只在 firefox/chrome 上测试过。)
在 800 像素宽度处，它将消息 block 移动到右列。问题是这是通过 float:right 和 position:absolute 完成的，这意味着它的高度不再影响周围的 div。所以消息框突出。
我可以(并且确实)通过添加 height:220px 来改进它，这样它在默认情况下看起来没问题。但是有人仍然可以在周围的 div 之外调整文本区域的大小。我发现调整文本区域的大小是一个很棒的功能，所以不想禁止调整大小。 overflow:auto 不是解决方案:用户只是将 textarea 上的滚动条换成 div 上的滚动条!
那么，有没有办法让外部 div 调整大小以始终包含文本区域？
<html>
<head>
<style>
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}
#contactform {margin: 0 auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
#contactform .required:after{color:red;content:" *";}
#contactform label {display:block;}
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}
@media (min-width: 800px) {
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
#formsecondhalf {top:0;right:6px;position:absolute;}
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
}
</style>
</head>
<body>
<div id="contactform">
<form action="" method="post">
<label for="name" class="required">Name:</label>
<input id="name">
<br/>
<label for="email" class="required">Email:</label>
<input id="email">
<br/>
<div id="formsecondhalf">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
<br />
<input type="submit" value="SEND">
</form>
</div>
</body>
</html>
最佳答案
使用 float:right 而不是绝对定位右侧区域。然后在其他字段周围包裹一个 div，使其向左浮动，然后将其全部清除。
例子
<html>
<head>
<style>
body{background:#fff;font-family:FreeSerif, serif;font-size:16px;margin: 0 0 0 0;}
#contactform {margin: 0 auto;overflow:auto;width:90%;max-width:320px;border:1px #000 solid;border-radius:8px;padding:6px;}
#contactform .required:after{color:red;content:" *";}
#contactform label {display:block;}
#contactform textarea {height:120px;rows:5;min-width:90%;max-width:90%;}
#contactform input,textarea {border: 1px solid red;border-radius:8px;width:90%;height:26px;padding:2px 4px;font-family:sans;}
@media (min-width: 800px) {
#contactform {margin: 0 auto;width:640px;max-width:640px;position:relative;/*height:220px;*/}
#formsecondhalf {float:right;}
#formfirsthalf {float:left;}
#contactform textarea {height:200px;rows:8;min-height:200px;min-width:300px;max-width:300px;}
#contactform input,textarea {width: 300px;min-width:300px;max-width:300px;}
}
</style>
</head>
<body>
<div id="contactform">
<div id="formfirsthalf">
<form action="" method="post">
<label for="name" class="required">Name:</label>
<input id="name">
<br/>
<label for="email" class="required">Email:</label>
<input id="email">
<br/>
</div>
<div id="formsecondhalf">
<label for="message">Message:</label>
<textarea id="message"></textarea>
</div>
<br />
<input type="submit" value="SEND">
</form>
</div>
</body>
</html>
关于html - 如何阻止文本区域从其包含的 div 中调整大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11341416/