###前提・実現したいこと
Ruby on Railsでアプリを作成しています。
タイトル、タグ、入力本文という3つだけ入力するコントロールを配置している画面があるのですが、3つ目の「入力本文」だけ可変にして、画面いっぱいになるまで常に大きくしておきたいです。
一つのボックスだけ画面の高さ100%にするようなことはできるようになったのですが、上記のやり方が分からず困っております。
現在は70vhを設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
ご存じの方いらっしゃいましたら教えていただけますでしょうか。
###ソースコード
_form.html.haml
html
1<div class="full_display_container"> 2 <div class="item_form"> 3 <%= form_for(@item, html: { multipart: true }) do |f| %> 4 <%= render 'shared/error_messages', object: f.object %> 5 <div class="field"> 6 <%= f.text_field :title, :placeholder => "タイトル", class: 'form-control' %> 7 <ul id="item-tags"></ul> 8 <div class="item_detail"> 9 <div class="left"> 10 <div class="col-sm-6"> 11 <%= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control' %> 12 </div> 13 </div> 14 <div class="right"> 15 <div class="col-sm-6"> 16 <div id="preview"> 17 <%= markdown(@item.content) %> 18 </div> 19 </div> 20 </div> 21 </div> 22 </div> 23 <%= f.submit "投稿", class: "btn btn-primary" %> 24 <% end %> 25 </div> 26</div>
items.sass
scss
1// Itemフォーム画面 2.item_form { 3 margin: 0 auto; 4 .field { 5 .item_detail { 6 // .form-control 7 h1, h2, h3, h4, h5, h6 { 8 border-bottom: 2px solid $list_border_top_color; 9 /* 下線 */ 10 margin: 50px 0 10px 0; 11 } 12 .left { 13 .col-sm-6 { 14 padding-left: 0; 15 } 16 } 17 .right { 18 .col-sm-6 { 19 padding-right: 0; 20 height: 70vh; 21 overflow-y: auto; 22 } 23 } 24 } 25 .col-sm-6 { 26 @media (max-width: 767px) { 27 padding-left: 0; 28 padding-right: 0; 29 } 30 #item_content { 31 height: 70vh !important; 32 } 33 } 34 } 35} 36
回答2件
あなたの回答
tips
プレビュー