Jiro Laboratory

C#、ASP.NET、JavaScript、Androidとか

ASP.NET MVC ＋ Bootstrap ウィンドウサイズに合わせる

ASP.NET Bootstrap

ASP.NET MVC で作成したページのコンテンツサイズをウィンドウサイズに合わせて広げる方法です。

について記載します。

高さを合わせる

DEMOページ

html

<body>
  <div class="navbar">

  <div id="container">
    @RenderBody()
  </div>
</body>
css

html {
  height: 100%;
}

body {
  height: 100%;
  padding-bottom: 0;
}

.container {
  min-height: 100%;
  height: auto;
}

html、body の height: 100%

.container の高さを100%にするのが目的ですが、height、min-heightの効果は直近の親要素のheightに依存するので、親であるbody、さらにその親であるhtmlのheightを100%にする必要があります。デフォルトは height: auto のため、明示的に指定しないとウィンドウサイズに合わせて広がってくれません。

padding-bottom: 0 の意味

これはデフォルトで作成される Site.css に以下のように記述されているため。

Site.css
body {
    padding-top: 50px;
    padding-bottom: 20px;
}

このままだと画面下に 20px の余白が生じてしまいます。
padding-top: 50px は 高さ50px の navbar がありますので、このままでＯＫ。

min-height を使用する理由

.container 内のコンテンツ量が多くてウィンドウサイズの高さを超える場合、height: 100%だと、コンテンツがはみ出して表示されてしまいます。min-height: 100% を使用することで100%を超える場合は拡張するようになります。

画面幅いっぱいに広げたい

つまり、こんな風にしたい場合。

画面の幅は .containerクラス の max-width として bootstrap.css に定義されています。

@media (min-width: 768px) {
  .container {
    max-width: 750px;
  }
  ・・・
@media (min-width: 992px) {
  .container {
    max-width: 970px;
  }
  ・・・

メディアクエリで画面サイズ毎に max-width を切り替えています。
なので、これを上書きすればＯＫ。

Site.css

.container {
  max-width: 100%;
}

ナビゲーション以外を幅100%にしたい場合は以下のようにします。

.body-content {
  max-width: 100%;
}