Bootstrapで検索窓の高さを%指定で変更する方法

Question

###前提・実現したいこと
◉前提
Bootstrapで構築しているサイトで、メインビジュアル上に検索窓を配置。

◉実現したいこと
検索窓の高さ／幅をウィンドウサイズにあわせて伸縮させたい。

※イメージでいうと「こちらのサイト」のトップ画面のような感じで、これをリキッドレイアウトにするような感じ。

###発生している問題・エラーメッセージ
幅の伸縮設定は実現できたが、高さの伸縮がうまくいかない。

###該当のソースコード

<div class="bg">
	<div class="bg-overlay">
		<div class="input-group">
			<input type="text" class="form-control search" value="キーワード入力">
			<span class="input-group-btn">
			<button class="btn btn-default" type="submit">
				<i class='glyphicon glyphicon-search'></i>
			</button>
			</span>
		</div>
	     <input type="text" id="rss" class="form-control" placeholder="サブ入力欄１" size="20">
          <input type="text" id="rss" class="form-control" placeholder="サブ入力欄２" size="20">
    	</div>       
</div>

.bg {
  background:blue;
  height:300px;
  width:1200px;
}

.bg-overlay {
    position: absolute;
    left: 5%;
    top: 40%;
    width: 70%;
    height:70%;
}

.search {
  height: 100%; //ここの値を100pxなど固定値にすれば高さ調節できるが、%で可変させたい。
}

###試したこと
参照した情報
①Input group · Bootstrap
Bootstrapのinput-groupのサイジング方法も参照したが、自分が望むものが実現できない。

②"height: 100%" の要素が画面の高さ100%にならない場合の対応方法
なども読んで、高さ指定の仕組みは理解きたが、実装がうまくいかず煮詰まってしまった。

ご助言よろしくお願いいたします。

Answer 1

100%がどこに対しての100%かがわからないのですが、vw/vhなどが使えると思います。

【CSS には vw, vh, vmin, vmax という単位がある ｜ Developers.IO】
http://dev.classmethod.jp/ria/html5/css-length-viewport/

【[CSS3] px や % はもう古い? Viewport unitsという新たな単位『vw』,『vh』の使い方 | phiary】
http://phiary.me/css-viewport-units-vw-vh/

Comments

[tuckQ]

こんな合理的な機能が用意されていたんですね！即効解決でした、ありがとうございました！