###前提・実現したいこと
◉前提
Bootstrapで構築しているサイトで、メインビジュアル上に検索窓を配置。
◉実現したいこと
検索窓の高さ/幅をウィンドウサイズにあわせて伸縮させたい。
※イメージでいうと「こちらのサイト」のトップ画面のような感じで、これをリキッドレイアウトにするような感じ。
###発生している問題・エラーメッセージ
幅の伸縮設定は実現できたが、高さの伸縮がうまくいかない。
###該当のソースコード
html
1<div class="bg"> 2 <div class="bg-overlay"> 3 <div class="input-group"> 4 <input type="text" class="form-control search" value="キーワード入力"> 5 <span class="input-group-btn"> 6 <button class="btn btn-default" type="submit"> 7 <i class='glyphicon glyphicon-search'></i> 8 </button> 9 </span> 10 </div> 11 <input type="text" id="rss" class="form-control" placeholder="サブ入力欄1" size="20"> 12 <input type="text" id="rss" class="form-control" placeholder="サブ入力欄2" size="20"> 13 </div> 14</div>
css
1.bg { 2 background:blue; 3 height:300px; 4 width:1200px; 5} 6 7.bg-overlay { 8 position: absolute; 9 left: 5%; 10 top: 40%; 11 width: 70%; 12 height:70%; 13} 14 15.search { 16 height: 100%; //ここの値を100pxなど固定値にすれば高さ調節できるが、%で可変させたい。 17}
###試したこと
参照した情報
①Input group · Bootstrap
Bootstrapのinput-groupのサイジング方法も参照したが、自分が望むものが実現できない。
②"height: 100%" の要素が画面の高さ100%にならない場合の対応方法
なども読んで、高さ指定の仕組みは理解きたが、実装がうまくいかず煮詰まってしまった。
ご助言よろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/04/08 05:29