質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2187閲覧

CSS フォームのうちの一つのコントロールだけを大きくして画面いっぱいにしたい

退会済みユーザー

退会済みユーザー

総合スコア0

Ruby on Rails

Ruby on Railsは、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby on Rails 4

Ruby on Rails4はRubyによって書かれたオープンソースのウェブフレームワークです。 Ruby on Railsは「設定より規約」の原則に従っており、効率的に作業を行うために再開発を行う必要をなくしてくれます。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2016/02/11 02:35

編集2016/02/17 12:14

###前提・実現したいこと
Ruby on Railsでアプリを作成しています。
タイトル、タグ、入力本文という3つだけ入力するコントロールを配置している画面があるのですが、3つ目の「入力本文」だけ可変にして、画面いっぱいになるまで常に大きくしておきたいです。
一つのボックスだけ画面の高さ100%にするようなことはできるようになったのですが、上記のやり方が分からず困っております。
現在は70vhを設定することである画面サイズの時は全画面表示できているのですが、画面の高さを大きくしたりすると、下の方の空白が大きくなってしまいます。
ご存じの方いらっしゃいましたら教えていただけますでしょうか。

###画像
OKな画面サイズの時
OK

画面の高さを変えた時
NG

###ソースコード
_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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yamato_hikawa

2016/02/17 04:49

変換後のHTML・CSSコードのほうがこちらの手元で再現できるので、ありがたいです。
guest

回答2

0

ベストアンサー

calc(100vh - 固定数値) で解決できます。
固定数値の部分は、テキストエリアの上下にあるコンテンツの高さの合計です。
タイトルの部分やボタンの部分は、ウィンドウの大きさが変わっても、その領域の高さは変動しないと思います。
その数値を差し引く形です。

下記のHTMLサンプルだと、.text_fieldと.submit の高さの合計を引けば、画面内に収まる高さに設定できます。

html

1<div class="full_display_container"> 2 <div class="item_form"> 3 <div class="field"> 4 <div class="text_field"> 5 <input type="text" placeholder="タイトル" /> 6 </div> 7 <div class="item-detail"> 8 <textarea class="text_area"></textarea> 9 </div> 10 </div> 11 <div class="submit">投稿</div> 12 </div> 13</div>

css

1.text_field { 2 padding: 5px; 3} 4 5.text_area { 6 width: 50%; 7 height: calc(100vh - 75px); 8} 9 10.submit { 11 padding: 10px; 12 background: #CCC; 13}

投稿2016/02/17 05:15

編集2016/02/17 05:16
yamato_hikawa

総合スコア2092

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2016/02/17 12:12 編集

ありがとうございます! 完璧にできました。 どのサイズでもカンペキにフォームサイズが変動してくれます! calcというのがあるんですね!勉強になりました。 次回から変換後のソースを貼り付けるようにいたします。
guest

0

テキストエリアだけ100%指定でならないでしょうか。

.form-control2 height:100%

haml

1= f.text_area :content, :placeholder => "本文をマークダウンで入力してください・・・" ,class: 'form-control2'

投稿2016/02/13 15:42

miyamiya

総合スコア691

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問