web-dev-qa-db-ja.com

Bootstrap fluid-containerのbody-content領域をスクロールするヘッダーとフッターを修正

グーグルでこの問題に対する簡単な答えを見つけることができなかったのには驚いたが、スクロールするコンテンツパネルへのほとんどの応答は適切に機能しないか、ブートストラップでは機能しなかった。

回答 このような 全ページのスクロールバーがありますが、これは間違っているようです。

ブラウザのスクロールバーを使用せずに、高さ100％htmlおよびbodyを使用しようとしていますが、スクロールは本文コンテンツ領域のみに表示されます。 bootstrapメニューの高さなどで動作する必要があります。

これまでのところ、動作するように見える唯一の方法は、絶対位置コンテンツとフッター要素を使用することです。

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 30px;
}

しかし、これは単に間違った方法であり、Bootstrap=レイアウトにマイナスの影響を与えているようです。たとえば、メニュー行が2行に折り返されている場合、コンテンツ領域はnav-bar div 。

すぐに使えるMVC Razor/Bootstrapアプリケーションと互換性のあるこのスタイリングについての正しい方法を教えてもらえますか？

ノート：

  • IE8以降で動作する必要があります。
  • Bootstrapで動作する必要があるため、Boostrapを調整すると（ヘッダー/フッターのサイズ）、それ自体も修正されます。

更新：

作業するJSFiddleを以下に示します（以下の回答の最新のソリューションを含む）。

JSFiddle：http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

htmlcssasp.net-mvctwitter-bootstrapless
18
Gone Coding

次のcssを追加して、デフォルトのスクロールを無効にします。

body {
    overflow: hidden;
}

そして、#content cssこれにより、コンテンツ本文のみでスクロールします。

#content {
    max-height: calc(100% - 120px);
    overflow-y: scroll;
    padding: 0px 10%;
    margin-top: 60px;
}

フィドルを参照してください。

編集：

実際には、cssが機能しているように見えるので、あなたが直面している問題が何であったかはわかりません。 HTMLとヘッダーのcssステートメントのみを追加しました。

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
}
html body .container-fluid.body-content {
  position: absolute;
  top: 50px;
  bottom: 30px;
  right: 0;
  left: 0;
  overflow-y: auto;
}
header {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    background-color: #4C4;
    height: 50px;
}
footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #4C4;
    height: 30px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
23
falsarella

別のオプションは flexbox を使用することです。

IE8およびIE9ではサポートされていませんが、以下を検討できます。

  • それらの古いIEバージョンを気にしない
  • フォールバックを提供する
  • polyfill を使用する

クロスブラウザを完全にサポートするには、ブラウザ固有のスタイルの追加のプレフィックスが必要ですが、基本的な使用方法は this fiddle と次のスニペットで確認できます：

html {
  height: 100%;
}
html body {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
html body .container-fluid.body-content {
  width: 100%;
  overflow-y: auto;
}
header {
    background-color: #4C4;
    min-height: 50px;
    width: 100%;
}
footer {
    background-color: #4C4;
    min-height: 30px;
    width: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<header></header>
<div class="container-fluid body-content">
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
  Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>Lorem Ipsum<br/>
</div>
<footer></footer>
7
falsarella

より良い選択肢が得られるまで、これは私が解決できる最も「ブートストラピー」な答えです：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/6cbrjrt5/

LESSを使用して、Bootstrap Source NuGetパッケージを含めて互換性を確保することに切り替えました（bootstrap variables.lessファイルへのアクセスを許可することにより：

_ layout.cshtmlマスターページ

  • フッターをbody-contentコンテナの外側に移動します
  • フッターでboostrapのnavbar-fixed-bottomを使用します
  • フッターの前に<hr/>をドロップします（現在は冗長です）

関連ページHTML：

<div class="container-fluid body-content">
    @RenderBody()
</div>
<footer class="navbar-fixed-bottom">
    <p>&copy; @DateTime.Now.Year - My ASP.NET Application</p>
</footer>

Site.less

  • HTMLおよびBODYの高さを100％に設定します
  • BODYoverflowをhiddenに設定します
  • body-content div positionをabsoluteに設定します
  • body-content div topをハードワイヤリング値ではなく@navbar-heightに設定します
  • body-content div bottomを30pxに設定します。
  • body-content div leftおよびrightを0に設定します
  • body-content div overflow-yをautoに設定します

Site.less

html {
    height: 100%;

    body {
        height: 100%;
        overflow: hidden;

        .container-fluid.body-content {
            position: absolute;
            top: @navbar-height;
            bottom: 30px;
            right: 0;
            left: 0;
            overflow-y: auto;
        }
    }
}

残りの問題は、ブートストラップのfooter heightの定義変数がないようです。 Bootstrapで定義された魔法の30px変数があるかどうかを誰かが教えてくれたら、それを感謝します。

2
Gone Coding