columを画面で半分半分にして、たての画面いっぱいに伸ばして、片方の書き込み一覧は書き込みが画面より多くなりそうだったらスクロールできるようにしたいです。
フロートを使いましたが半分にならないで、overflow-yも効果が無かったです。フロートとかoverflow-yじゃなくてもいいので何かいい方法はありませんか?
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div class="wrapper"> <div class="colum"> <div class="post_header"> <h2>投稿</h2> </div> <div class="post_section"> <form> 名前: <input type="text"> 内容: <textarea></textarea><input type="submit"> </form> </div> </div> <div class="colum"> <div class="read_header"> <h2>書き込み一覧</h2> </div> <div class="read_section"> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> <section> <p>書き込み</p> </section> </div> </div> </div> </body> </html>
* { margin: 0; } input, textarea { display: block; } .colum:nth-of-type(1) { float: left; width: 50vw; height: 100%; } .colum:nth-of-type(2) { float: right; width: 50vw; height: 100%; overflow-y: auto; }
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。