4

私は今非常にイライラしています。コンテナーがページの下部まで拡張されない理由がわかりません。表示されているウィンドウの一番下に到達しますが、それを過ぎて下にスクロールすると、背景が終了します。

私の基本的な構造は次のようになります...

<div id='container'>
    <div id='content'>
        /*Some Content here but all divs opened here are closed. (Title Bar, Nav, etc)
        <div id='mainTableContainer'>
             /*This is where a bulk of the code is. A table is generated in PHP and it
                gets fairly lengthy.
        </div>
    </div>
</div>

これが基本的な HTML です。なぜ #container がページの一番下まで伸びないのか、一生理解できません!

そして、CSS

html{
height:100%;    
}
body {
    font: 100%/1.4 "Museo-sans", Verdana, Arial, Helvetica, sans-serif;
    background: #ccc;
    margin: 0;
    padding: 0;
    color: #000;
    height:100%;
    background-image:url(images/bg.png);
}
.container {
    width: 960px;
    background: #FFF;
    height:100%;
    margin: 0 auto;
    border-left-style:dashed;
    border-right-style:dashed;
    border-width:1px;
    border-color:#bf0000;

  }
 .content {
    height:100%;
    padding: 10px 0;
  }
#mainTableContainer{
    margin:0px auto;
    width:90%;
    height:100%;
    text-align:center;

}

このサイトで見つけた多くのヒントを試しましたが、何も役に立ちませんでした。何も浮かんでいないと思います。すべての高さを 100% に設定してみました。最小幅を設定してみました...わかりません!!

編集: OK I MADE A JSFILDDLE したがって、jsfiddle で 2 番目のディスプレイのサイズをテーブルよりも小さく縮小してから更新すると、背景が完全に下がらず、テーブルが空中に「浮いた」ままにしました。 http://jsfiddle.net/LGM3y/1/

4

3 に答える 3

4

クラスを選択しようとしていますが、コンテナーは ID であるため、次のものが必要です。

#container

それ以外の

.container

それでも解決しない場合は、コンテナではなく HTML タグに背景 CSS を設定してみてください。

html{
    height:100%;    
    background:#ccc url(images/bg.png);
}

等

于 2012-06-21T22:41:00.067 に答える
1

あなたが削除した場合、それはうまくいくようです（私があなたが何を求めているのかを正確に理解している場合）

html {height: 100%;}

コンテナがスペースを埋めます..

于 2012-06-22T00:03:19.383 に答える
0

私がこれに使用するトリックの1つは、拡張するコンテナーのCSSルール<div>を具体的に設定することです（IEで結果が混在しています） 。display: block

例：

#container {
display: block;
height: 100%;
}
于 2012-06-21T22:46:03.783 に答える