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;}

我不想在#left内容中指定高度，因为内容的更大内容#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

通常在 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 回答
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并给它一个左边距，在那个左边距你漂浮在导航栏中..

这样，两者中最长的一个（主栏或导航栏）..另一个将具有相同的背景颜色..您只需放置一个填充以在视觉上将它们分开

于 2013-03-12T05:29:56.410 回答