0

この写真のようにCSSで2列のテンプレートを作成しました。

私のテンプレート

メインdivはmainです。内部に2つのダイビングがあります。DIVサイダーには背景画像があります。そしていつも見せたいです。今、私は2つの問題を抱えています。まず、デフォルトでは画面の高さをカバーしていませんmin-height=...。次に、これを行うと、ページをスクロールした後、画面の高さ全体をカバーするために背景画像が繰り返されません。

html {
    margin:0 0 0 0;
    height: 100%
}

body {
    font-family:Arial;
    font-size:9pt;
    color:#333333;
    line-height:200%;
    margin:0 0 0 0;
    background: #f0f0f0 url('../images/bg-radial-gradient.gif') fixed 230px top no-repeat;
    width:100% !important;
    height: 100%
}

#main {
    width:100%;
    min-height: 100%
}

#sidebar {
    width:231px !important;
    float:left;
    background-image:url('../images/sidebar_bg.PNG');
    min-height: 100%;
}

#container {
    float:left;
    padding:25px 25px 25px 25px;
    width:70%;
    min-height: 100%
}

どうしたの？

編集：これは私の背景画像です
ここに画像の説明を入力してください

4

1 に答える 1

1

これを試してください-デモ1：不要な空白

下部に追加のスペースがあるのは、padding:25px;（と同じ padding:25px 25px 25px 25px;）のためです。追加の上部パディングと下部パディングがあり、これによりdivが追加され50pxます。

追加のスペースが必要ない場合-これを試してください=>デモ2：空白なし

これを使用して、上部と境界線の25pxと同じ効果を複製できます。

padding:0 25px;
margin:25px 0;

その余分な不要なスペースを避けるため。

編集：

追加のスペースはmargin:25px 0;、削除すると発生します。余分なスペースはありません。この デモを確認してください。3マージンによって発生した不要なスペースを削除します。

編集2：

あなたの問題は十分に文書化された問題です-列の一致の問題。あなたが試すことができる解決策はたくさんあります、ここにいくつかあります：

1）javascript

2）画像を変更する（ハッキー）

3）純粋なCSS

私のお気に入り=>オプション2

私は最後のものを個人的に調べたことがありませんが、試してみてください.. :)

それが役に立てば幸い..

于 2012-07-29T19:42:29.943 に答える