1

Twitter Bootstrap で Web ページを作成しています (問題がある場合)。ページを 100% にしたいです。高さで、ページの下部または上部に空のスペースがなくなります。現在は次のようになっています。

ここに画像の説明を入力

そして、私はそれを次のようにしたい:

ここに画像の説明を入力

長いページでは、コンテナーに余分な空白を含めることはできませんが、次のように高さが 100% のままになります。

ここに画像の説明を入力

しかし、どうすればこれを達成できますか？レイアウトは流動的ですか？

4

3 に答える 3

0

これを試して

<html>
    <link rel="stylesheet" type="text/css" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
    <body>
      <div id="fill">
        <div id="content"></div>
      </div>
    </body>
</html>

CSSは次のようになります

#content{
    width: 100%;
    height: 100%;
    min-height: 100%;
    background: black;
    display: block;
}

html, body {
    height: 100%;
}

#fill { 
    min-height: 100%;
    height: 100%;
}
​
于 2012-10-16T10:45:17.180 に答える
0

display: table と display: table-row を使用します。display: テーブルをサポートしていない古いブラウザーの場合は、Modernizr と jQuery フォールバックを使用できます。ここにフィドルがあります：

http://jsfiddle.net/85FHe/11/

CSS テーブル表示サポートの詳細については、http://caniuse.com/css-tableにアクセスしてください。

于 2012-10-16T17:51:45.520 に答える
0

これにはjqueryが必要ですが、少なくとも私にとっては画面サイズに関係なくページ全体をうまく取得できるように見えました。

    var height = $(window).height();
    var cssheight = String(height)
    $('#tabs-1').css('height', cssheight);
于 2013-06-01T21:00:43.580 に答える