menu
menu

position: absolute; width: 100%;を指定すると横幅の設定がうまくいかない場合の対処方法について | Webデザインラボ

キーワード検索

12月のアクセストップ10

  1. ( 2↑) CSSだけでドロップダウンメニュー
  2. ( 1↓) スマホサイトの作成・基本編
  3. ( 3-) CSSだけでサイズ可変・スマホ対応のアコーディオン
  4. ( 4-) HTML5・ページ作成の基本
  5. ( 7↑) 表示しているブラウザの高さを取得してCSSのheightに指定
  6. ( 5↓) jQueryでドロップダウンメニュー
  7. (10↑) CSSだけでブロック要素の表示非表示(トグルボタン)
  8. ( 6↓) スマホ・タブレット・PCの振り分けいろいろ
  9. ( 8↓) Windows 10にApache2.4 VC11をインストール
  10. ( -↑) jQueryで日時を表示【実践でjQuery入門】
  • facebook11
  • はてなブックマーク4
  • Google+2
  • Pocket0
  • Twitter1

position: absolute; width: 100%;を指定すると横幅の設定がうまくいかない場合の対処方法について

  • Labs

CSS

こんにちは(・∀・)

CSSでposition: absolute; width: 100%;を指定すると横幅の設定がうまくいかない場合があります。そんな場面に出くわしてしまった場合どうすれば良いのか…
そんな場面での対処方法についてご紹介します。

%指定の横幅を親要素に合わせたい

次のような指定をすると…

要素.hakoにposition: absolute; width: 100%;を指定。

HTML

<div class="oya-youso">
<div class="hako">
hako
<!--hako--></div>
<!--oya-youso--></div>
CSS

.oya-youso{
  width: 400px;
  height: 200px;
  background: lightgray;
}
.oya-youso .hako {
  position: absolute;
  width: 100%;
}
Result
oya-youso
hako

要素.hakoが親要素.oya-yousoからはみ出してしまいます。


ではどのような指定だとうまくいくの…?


HTML

<div class="oya-youso">
<div class="hako-oya">
<div class="hako">
hako
<!--hako--></div>
<!--hako-oya--></div>
<!--oya-youso--></div>
CSS

.oya-youso {
	width: 400px;
	height: 200px;
	background: lightgray;
}
.oya-youso .hako-oya {
	position: relative;
	background: lightpink;
}
.oya-youso .hako-oya .hako {
	width: 100%;
	position: absolute;
	background: lightblue;
}
Result
oya-youso
hako-oya
hako

要素.hakoと親要素.oya-yousoの間に要素.hako-oyaを設定してposition: relativeを指定します。するとposition: absoluteを指定している要素.hakoの横幅は要素.oya-yousoと要素.hako-oyaの範囲内に収まります。

横paddingを指定したい

要素.hakoに横paddingを指定したい場合は…?


通常要素にwidth: 100%の指定をして横paddingを指定するとpadding分横幅は大きくなってしまいます。ブロック要素は横幅100%に設定されているのでwidthの指定を省略することができます。widthの指定を省略しているブロック要素にpaddingを設定すると、横幅100%で横paddingを設定することができます。しかし、今回のサンプルのように、要素にposition: absoluteが指定してあると横幅の省略はできなくなるので、要素.hakoに直接paddingの設定をすることはできません。


HTML

<div class="oya-youso">
<div class="hako-oya">
<div class="hako">
<div class="hako-inner">
hako
<!--hako-inner--></div>
<!--hako--></div>
<!--hako-oya--></div>
<!--oya-youso--></div>
CSS

.oya-youso {
	width: 400px;
	height: 200px;
	background: lightgray;
}
.oya-youso .hako-oya {
	position: relative;
	background: lightpink;
}
.oya-youso .hako-oya .hako {
	width: 100%;
	position: absolute;
	background: lightblue;
}
.oya-youso .hako-oya .hako .hako-inner {
	padding: 10px;
}
Result
oya-youso
hako-oya
hako

なので要素.hakoに子要素.hako-innerを作って、そちらにpaddingを指定します。


関連リンク

width【CSS3リファレンス】

position【CSS3リファレンス】

padding【CSS3リファレンス】

  • カテゴリー:Labs
  • facebook11
  • はてなブックマーク4
  • Google+2
  • Pocket0
  • Twitter1