0

私が使ったHTML...

<div id="left">
   few contents here
</div>
<div id="right">
   more contents here
</div>

適用したCSS...

#left{float: left; width: 300px; background: red;}
#right{float: right; width 600px; background: green;}

content の高さを指定したくないのは、 #leftcontent のどのような大きなコンテンツになるの#rightでしょうか? だから、私は使用height: 100%;しまし#leftたが、うまくいきませんでした。

4

4 に答える 4

1

コンテナ要素の高さも増やす必要があるので、これを試してください

html, body {
   height: 100%;
}

デモ

于 2013-03-12T04:09:05.053 に答える
0

ここにあなたの解決策があります

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    </head>
    <style type="text/css">
    html, body {
        height: 100%;
    }
    #left {
        float: left;
        width: 300px;
        background: red;
        height:100%
    }
    #right {
        float: right;
    width 600px;
        background: green;
        height:100%
    }
    </style>
    <body>
    <div id="left"> few contents here </div>
    <div id="right"> more contents here </div>
    </body>
    </html>
于 2013-03-12T04:52:32.080 に答える
0

わかりましたこれを試してくださいhttp://jsfiddle.net/7KhXd/1/

ここにhtmlの要約があります：

<div id="container">
    <div id="left-nav">
        <!-- left nav content-->
    </div>
    <div id="main"> 
        <div>
            <!-- main body contnent-->
        </div>
    </div>
</div>

CSS:

#container {
  background-color: grey;
  width: 1000px;
}


#main {
  margin-left:20em;

  background-color: white;
  padding-left: 2em;
}

#main > div {
  background-color: grey; /* so that main has the same color as nav bar if necessary */
}

#left-nav {
  width: 19em;
  float: left;
}

説明:左のナビゲーション バーを本体と同じ長さにするのではなく、同じ長さであるかのように見せ たいという考えです..背景色を指定することで、それを実現します。本体と同じ長さで伸びます（長短問わず）。

そのため、コンテナ div (つまり、ラッパー div) があり、背景色を指定します。メイン div を作成し、左マージンを指定します。その左マージンで、ナビゲーション バーに浮かびます。

このようにして、2つのうちどちらが長いか（メインまたはナビゲーションバー）..もう一方は同じ背景色になります..それらを視覚的に分離するためにパディングを配置するだけです

于 2013-03-12T05:29:56.410 に答える
0

通常、CSS では、どちらかの側の高さを固定/既知にする必要があります。 解決策:片側の境界線を反対側の背景として使用します。

<html>
<head>
    <title></title>
    <style type="text/css">

    #container { width: 800px; margin-left: auto; margin-right: auto; }
    #wrapper {
        display: inline-block;
        border-left: 200px solid #efacec;
    }
    #left {
        float: left;
        width: 160px;
        margin-left: -190px;
        margin-right: 200px;
        position: relative;            
    }
    #right {
        float: right;
        width: 200px;
        background-color: lightblue;
    }    
    </style>
</head>
<body>
    <div id="container">
        <div id="wrapper">
            <div id="left">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit,
                </p>
            </div>
            <div id="right">
                <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.
                </p>
            </div>
        </div>
    </div>
</body>

于 2013-03-12T05:01:12.787 に答える