我一直在玩响应式布局和表单.到目前为止,我对我所拥有的东西感到非常满意：它从手机到宽屏都能很好地工作;见下文. (目前仅在firefox / chrome上测试过.)
在800px宽度处,它将消息块移动到右列.问题是这是用float：right和position：absolute来完成的,这意味着它的高度会停止影响周围的div.所以消息框突出.
我可以(并且做)通过添加高度：220px来改善这一点,所以默认情况下看起来没问题.但有人仍然可以调整周围div之外的textarea.我发现将textareas调整为一个很棒的功能,所以不要禁止调整大小.而溢出：auto不是解决方案：用户只需在textarea上交换滚动条就div上的滚动条！
那么,有没有办法让外部div调整大小以始终包含textarea？
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;}
}
required">Name:required">Email: 最佳答案
使用float：right而不是绝对定位正确的区域.然后在其他字段周围包裹一个div,向左浮动,然后将其全部清除.
例
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;}
}
required">Name:required">Email: 