0

設定する必要がありますheight:100%。これが私のコードです：

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
}

#left-side{
    border: 1px solid red;
    float: left;
    background-color: #FFFFFF;
    height: 100%;
    margin: 0 20px 0 10px;
    width: 200px;
}
#right-side{
    border: 1px solid green;
}

<body>
    <div id="wrapper">
        <div id="left-side">
            lol
        </div>
        <div id="right-side">
            <!-- squares -->
        </div>
    </div>
</body>

写真

問題はどこだ？

4

4 に答える 4

0

CSSを少し編集しました。これが必要かどうかを確認してください

#wrapper{
    width: 1000px;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
}

#left-side{
    position:relative;
    border: 1px solid red;
    float: left;
    background-color: #FFFFFF;
    margin: 0 20px 0 10px;
    width: 200px;
}

#right-side{
    width:600px;
    float:right;
    border: 1px solid green;
}
于 2012-12-23T23:30:54.813 に答える
0

パーセンテージで作業する場合、それはその親に相対的です。には、高さが定義されていない親（）があります#wrapper。body

cssに、次を追加します。

    html, body { height: 100% }

そして今、あなた#wrapperはそれの親に関係することができます。これはhtml、ブラウザウィンドウが親、body html親などであるためです。

デモフィドル

于 2012-12-23T23:35:28.247 に答える
0

単に同じ高さの列を持つことが目標である場合、display: tableプロパティはこれに非常にうまく機能します。

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    /*border: 1px solid red;*/
    display: table; /* here */
}

#left-side{
    border: 1px solid red;
    display: table-cell; /* replaces the float */
    background-color: #FFFFFF;
    height: 100%;
    margin: 0 20px 0 10px;
    width: 200px;
}
#right-side{
    border: 1px solid green;
    display: table-cell; /* here */
}

http://jsfiddle.net/VTCxs/

の画像が#right-side流れないようにすることが目的の場合は、 to の幅に等しい#left-sideマージンまたはパディングを追加する必要があります。#right-side#left-side

于 2012-12-23T23:37:50.583 に答える
0

100% の高さが全画面表示を意味する場合は、html と body タグを 100% に設定して、ラッパーがネストされたコンテナーを実際にラップしていることを確認する必要があります。ラッパー要素にフロート ブレークを追加する必要があります。 .

html,body {
 height:100%;
}

#wrapper{
    width: 100%;
    height: 100%;
    margin: 0 auto;
    padding: 50px 10px 0 0 !important;
    border: 1px solid blue;
}

#wrapper:after {
    content: " ";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;

}

ここに小さなデモがあります。ラッパーの高さが 100% で、上部に 50px のパディングがあるため、すぐにスクロールバーが表示されます。

于 2012-12-23T23:40:04.500 に答える