2

この質問には答えていると確信していますが、質問して申し訳ありませんが、理解できるものを見つけることができませんでした (申し訳ありませんが、私の知識はまだ非常に限られています)。

上部にバナー、下部にフッターがある単純な 2 列のサイトを設計しています。-> ライブデモ: http://jsfiddle.net/4XYWJ/1/

左側にナビゲーション カラム「nav」とコンテンツ カラム「content」がありますが、残念ながら、ナビゲーション カラムの最後に到達すると、コンテンツが「曲がり」ます。Hve は min-height を試しました。これは、特定のピクセル数、つまり 570px を設定すると機能しますが、複数の CSS が必要です。

wrapper、nav、contentのコードは次のようになります。

#wrapper {
        width:90%;
        margin:20px auto;
        border-bottom: 1px dotted black;
    }

.nav {
        float:left;
        width:200px;
        min-height: 100%;
        background-image: url(img/blank.gif);
        background-repeat: repeat-y;
    }


#content {
        width: 100%;
        min-height: 570px;
        text-align: left;
        padding-top: 10px;
        background-color: #f3e8d6; /*Default bg, similar to the background's base color*/
        background-image: url("../img/tree.jpg");
        background-position: right bottom; /*Positioning*/
        background-repeat: no-repeat; /*Prevent showing multiple background images*/
    }

誰でもこれで私を助けることができますか? 私は髪を引っ張り始めています..また、右下の画像を取得することもできたので、すべてを分解するのが少し怖いです..

あなたの助けに感謝します。

よろしくお願いします、サイモン

4

2 に答える 2

0

その左側のスペースを予約して、デフォルトで 100% 拡張しようとする#content{margin-left:200px}を削除してみてください。こちらと例をご覧ください。width

于 2013-07-21T19:04:26.640 に答える