5

私はレスポンシブレイアウトとフォームで遊んでいます。私はこれまでのところ非常に満足しています。モバイルからワイドスクリーンまでうまく機能します。下記参照。（これまでのところ、Firefox / Chromeでのみテストされています。）

800pxの幅で、メッセージブロックを右の列に移動します。問題は、これがfloat：rightとposition：absoluteで行われることです。これは、その高さが周囲のdivに影響を与えなくなることを意味します。そのため、メッセージボックスが突き出ています。

height：220pxを追加することで、これを改善できます（実際に実行できます）。これにより、デフォルトで問題なく表示されます。ただし、誰かがテキストエリアのサイズを周囲のdivの外側に変更することはできます。textareasのサイズ変更はすばらしい機能だと思うので、サイズ変更を禁止したくありません。そしてoverflow：autoは解決策ではありません：ユーザーはテキストエリアのスクロールバーをdivのスクロールバーと交換するだけです！

それで、常にtextareaを含むように外側の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>
4

1 に答える 1

4

右側の領域を絶対に配置する代わりに、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>
于 2012-07-05T14:52:01.203 に答える