1

css を正しく設定するのに問題があります

これが私が遊んでいる私の小さなコードです：

<!DOCTYPE html>

<html>
<head>
    <style type="text/css">
        *          { margin: 0; padding:0; }
        html, body { width: 100%; height: 100%; background: #abc; }
        #container { background: #eee; width: 100%; height:100%;}
        #sidebar   { background: #a0f; width: 200px; height: 500px; position: absolute; left: 0px; top: 0px; }
        #content   { background: #777; margin-left: 200px; width: auto; height: 100%; }
        #wrapper   { background: #357; height: auto; padding: 10px;}

        #column1   { background: #0f0; width: 66%; float: left; }
        #column2   { background: #f00; width: 33%; float: right; }
        #text1     { background: white; width:80%; min-width: 300px; margin: 0 auto;}
        #text2     { background: white; width:80%; min-width: 300px; margin: 0 auto;}
    </style>
</head>
<body>
    <div id="container">
        <div id="sidebar">
        </div><!-- end sidebar -->
        <div id="content">    
            <div id="column1">
                <div id="text1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div><!-- end column1 -->
            <div id="column2">
                <div id="text2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                </div>
            </div><!-- end column2 -->
        </div><!-- end content -->
    </div><!-- end container -->
</body>
</html>

これは、左側に固定サイドバーがあり、右側に流動的なコンテンツ領域があるページであると想定されています。短いページでは、背景色を#content画面の下部まで拡張する必要があります(これは機能します)。長いページでは、その背景をページの最後まで拡張したい (これはそうではありません)。

何がどこにあるのかを確認するためにすべての要素に色を追加しましたが、最終的には#content背景が透明度 0.9 の白になり、背景画像が に表示されbodyます。

それを修正する方法は？

更新: ここで実際の例を参照してください: http://jsbin.com/AXUmALU/1/edit?html,output - 出力を上にスクロールして、色の切れ目を確認してください。

4

1 に答える 1

2

私はあなたがここに欲しいものを持っていると思います。clearfixCSS では、非常に一般的なクラスのセレクターをいくつか追加しました。次のようになります。

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

そして、そのクラスを#contentThis css is from HTML5 Boilerplate に追加しました。私も変わりました

#content { height: 100%; }に#content { min-height: 100%; }

必要に応じて、コンテンツが画面のサイズを超えて拡大できるようにします。

于 2013-10-01T19:15:03.273 に答える