Question

我用的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，但它没有用。

Answer 1

你需要增加容器元素的高度，所以试试这个

html, body {
   height: 100%;
}

Demo

Answer 2

这是你的解决方案

    <!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>

Answer 3

通常在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>

Answer 4

好的尝试这个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并给它一个左边距，在左边距你漂浮在导航栏中..

这两种方式中哪一个最长（主要或导航栏）..另一个将具有相同的背景颜色..你只需要填充以在视觉上分开它们

左浮动div的100％背景，其中另一个右浮动div超过左边

4 个答案: