iPadやAndroid Tabletでheight: 100%;が効かない

PCだとheight:100%;が意図した形で効いているのに、iPadやAndroid Tabletでは効かない現象に遭遇したのでメモ。

サンプルコード

display: flex;で横並びにして、その中で高さを揃えるようにしてみます。

HTML

<ul class="parent">
	<li class="item">
		<div class="children">テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト<br>テスト<br>テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト<br>テスト</div>
	</li>
	<li class="item">
		<div class="children">テスト<br>テスト</div>
	</li>
</ul>

.itemを横並びにして、その中の.childrenにheight: 100%;で高さを揃えるようにしてみます。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	height: 100%;
	background: #3498DB;
}

PCだと意図した形で表示されるのですが、iPadやAndroid Tabletなどでは.childrenのheightが効かず、内容量に応じてつぶれた状態になっていました。
対応前のデモページ
 

対応方法として、.itemにもdisplay: flex;を指定して、.childrenからheightの指定を外します。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	display: flex;
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	background: #3498DB;
}

これでタブレットでも意図した表示になりました。
対応後のデモページ
 

もしくは、height: 100%;を指定する親要素が固定値の場合もきちんと効くようになるようです。
.itemにheightで固定値を指定する形でも解消されました。

CSS

.parent {
	display: flex;
	justify-content: space-between;
	width: 960px;
	margin: auto;
}
.item {
	height: 120px;
	padding-left: 20px;
	background: #E74C3C;
}
.children {
	width: 100px;
	height: 100%;
	background: #3498DB;
}

対応後のデモページ2
恐らく、親要素の高さが固定値でない場合に発生するのではないかと思われます。
 

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年10月
 12345
6789101112
13141516171819
20212223242526
2728293031