3

DIV に min0height プロパティを追加して 100% にするたびに、機能しません。高さを含むすべての DIV にそれらを追加しました: 100%; 最小高さ: 100%; しかし、何も機能しません。どこまでも伸ばすにはどうしたらいいでしょうか？サイドバーの背景とコンテンツ領域の背景色を切り取るだけです。

代替テキスト

(一部にラベルを付けるのを忘れました。白い背景のコンテンツ領域は .col1 です)

CSS:

@charset "UTF-8";
/* CSS Document */

img {
    border-style: none;
    color: #FFF;
    text-align: center;
}
body {
    background-color:#000;
    margin:0;
    padding:0;
    border:0;           /* This removes the border around the viewport in old versions of IE */
    width:100%;
}
.sidebar {
    background-image:url(../images/sidebar/background.png);
    background-repeat:repeat-y;
    font: 12px Helvetica, Arial, Sans-Serif;
    color: #666;
    z-index:1;
}
.menu {
    background-image:url(../images/top_menu/background.png);
    background-repeat:repeat-x;
    height:25px;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    top:0px;
    z-index:5;
    background-color:#000;
}
.bottom_menu {
    background-image:url(../images/bottom_menu/background.png);
    background-repeat:repeat-x;
    height:20px;
    z-index:2;
    font: 12px Helvetica, Arial, Sans-Serif;
    clear:both;
    float:left;
    width:100%;
    position:fixed;
    bottom:0px;
}
.colmask {
    position:relative;      /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
    clear:both;
    float:left;
    width:100%; /* width of whole page */
    overflow:hidden;    /* This chops off any overhanging divs */
}
.sidebar .colright {
    float:left;
    width:200%;
    position:relative;
    left:225px;
    background:#fff;
}
.sidebar .col1wrap {
    float:right;
    width:50%;
    position:relative;
    right:225px;
}
.sidebar .col1 {
    margin:30px 15px 0 225px; /* TOP / UNKNOWN / UNKNOWN / RIGHT */
    position:relative;
    right:100%;
    overflow:hidden;
}
.sidebar .col2 {
    float:left;
    width:225px;
    position:fixed;
    top:0px;
    left:0px;
    margin-top:25px;
    margin-left:5px;
    right:225px;
}
.clear {
    clear: both;
    height: 1px;
    overflow: hidden;
}

HTML

<body>
<div id="container">
<div class="menu">Header Content</div>
<div class="colmask sidebar">
    <div class="colright">
      <div class="col1wrap">
            <div class="col1" id="contentDIV">
                Content
            </div>
        </div>
        <div class="col2">
            Sidebar Content
        </div>
    </div>
</div>
<div class="bottom_menu">Footer Content</div>
</div>
</body>
4

3 に答える 3

2

修理済み。body タグの直後のコンテナ div でした。高さ CSS を使用しても、問題が発生しました。私はそれを削除し、その div でレンダリングしていたスクリプトを document.body に変更したところ、すべてが機能するようになりました。

于 2009-06-06T03:35:05.453 に答える
0

コンテンツとサイドバーをページの高さ全体に広げようとしている場合、高さをいくら設定しても実際には役に立ちません。100% を使用すると、フォッターがページの下部から押し出されるため、スクロールして表示する必要があります。フッター付きのフルハイトのボディを作成できる方法が 1 つあります: スティッキー フッター

詳細は以下のサイトをご確認ください。http://www.cssstickyfooter.com/

おそらく必要になる別のトリック。2 つの列を同じ高さにし、すべてのブラウザーをサポートすることはほぼ不可能です。灰色の列を左に、白い中央のボディをフッターまで伸ばす最も簡単な方法は、適切な比率で灰色と白を含む 1 ピクセルの高さの画像を使用することです。軸。

CSS に関するもう 1 つの優れたサイトは、A List Apartです。

于 2009-06-06T03:02:43.240 に答える
0

フロートを使用して同じ要素に配置し、一貫したレイアウトを取得するのは困難です。特に float と position:fixed (または absolute) は互換性がなく、ブラウザーごとに状況の処理が異なります。

IE6 は position:fixed をまったくサポートしておらず、position:static として扱います (デフォルト - ポジショニングはまったくありません)。

于 2009-06-06T03:47:37.017 に答える