締切済み

幅いっぱいに表示させたい

  • 困ってます
  • 質問No.9508383
  • 閲覧数44
  • ありがとう数0
  • 気になる数0
  • 回答数1
  • コメント数0

お礼率 11% (46/410)

Bootstrapで以下のように作成した時、id="kore"の部分はcontainerの幅分しか背景色が表示されません、両端の余白分。
「h1サンプル」や「<p>いいい」の位置は変えずにid="kore"の背景色だけ幅いっぱいに表示させる方法はありますか?(サンプル、あああ、いいいの文字位置もそのままで)。

色々試したのですが・・・出来ず、困っています。
---
<div class="container-fluid">
<div class="container">
<h1>サンプル</h1>
<p style="background-color:red;" id="kore">あああ</p>
<p>いいい</p>
</div>
</div>

回答 (全1件)

  • 回答No.1

ベストアンサー率 67% (783/1156)

他カテゴリのカテゴリマスター
Default設定の場合は p 等のブロック要素の横幅は width:100%; に初期設定が設定されています。それが無効化されると言う事は、恐らく親要素のdivの .container-fluid か .container のどちらかに横幅指定がある場合、子要素の p#kore はそれ以上には横幅を持つ事は出来ません。或いはその Bootstrap とやらの方で勝手に初期設定値を決めてしまっているのかも。

とりあえずは、

#kore { width: calc(100vw - 8px); }

~みたいなスタイル設定を新たに割り振れば、p#kore がブラウザの見た上での横幅いっぱいに広がると思います。もちろん直書きで <p id="kore" style="background-color:red;width: calc(100vw - 8px);">あああ</p> としてもOKです。

P.S.
横幅指定値に -8px を付け足してるのは 100vw だけだとそれ以外の要素との関係性によっては少しはみ出してしまい、不格好な「横スクロールバー」が表示されるのを回避するハックです。最適な数値は環境によって異なるので、適当に調整してみてください。
感謝経済、優待交換9月20日スタート
AIエージェント「あい」

こんにちは。AIエージェントの「あい」です。
あなたの悩みに、OKWAVE 3,500万件のQ&Aを分析して最適な回答をご提案します。

関連するQ&A
こんな書き方もあるよ!この情報は知ってる?あなたの知識を教えて!
このQ&Aにはまだコメントがありません。
あなたの思ったこと、知っていることをここにコメントしてみましょう。

その他の関連するQ&A、テーマをキーワードで探す

キーワードでQ&A、テーマを検索する

特集


より良い社会へ。感謝経済プロジェクト始動

ピックアップ

ページ先頭へ