Demo Fiddle

Question

我有一个容器div和2个div应该是相同的高度。 #Sidebar div在左边，#Content div应该在右边

每当我向补充工具栏添加内容时，它会推送内容Div并且有点难过

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/2009_07.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>View Applicants</title>

<style type ="text/css">
li
{
display:inline;

background-color: #c5e8cf;
}

a.menu:link {color: #2b2f2c;}
a.menu:visited {color: #2b2f2c;}
a.menu:hover {background-color: #dde504;}

a.side { border-bottom: 2px solid black;
    background-color: #e3e7ec;
    }
a.side:link {color: #2b2f2c;}
a.side:visited {color: #2b2f2c;}
a.side:hover {background-color: #dde504;}
label.side {width: 131px;
        display:inline-block;
        font-size: 20px;
        background-color: #e3e7ec;
        border-bottom: 2px solid black;
        padding-bottom: 20px;
        }
label.side:hover { background-color: #dde504;}

div#header {
    position: float;
    background-image: url("../images/header.jpg");
    background-repeat: no-repeat;
    border-bottom: solid 1px #999999;
    height: 97px;
           Width: 1000px;
        margin-left: 114px;
        margin-top: 10px;
        background-size: 100%;
}

div#menu { 
position: float;    
border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
      margin-left: 115px;
padding-top:5px;

background-color: #e3f6ea;
}
#menu-content { 
margin: auto;
width:100%;
background-color: #c5e8cf;

}

div#container{

border-left: solid 1px #999999;
border-right: solid 1px #999999;
border-bottom: solid 1px #999999;
Width: 998px;
margin-top:3px;
margin-left:115px;
height: auto;
overflow: hidden;
}

div#sidebar { 
    position: relative;
border:2px solid #999999;
Width: 131px;

padding-bottom: 1000px;
margin-bottom: -1000px;

background-color: #c5cfd9;
overflow: hidden;
}

div#content {
position: relative;
padding-bottom: 1000px;
margin-bottom: -1000px;
border-left: solid 1px #999999;
top: -65px;
left: 132px;
background-color: #f6f4f4;
}

div#footer { position: relative;
        border: solid 2px #999999;

        width: 996px;
        height: 50px;
        background-color: #FFFFFF;
        margin-left: 115px;
}

#body { background-color: #6b86a3;}


</style>

</head>

<body id = "body" >

<div id="header"> </div>
<div id = "menu"> 


<div id="menu-content">
<ul>
      <li style="margin-left:275px;" class="link"><a class="menu" href="/index.php" >Home</a></li>


      <li ><a class="menu" href="/images/header/jpeg" >View Applicant</a>

  </li>
      <li><a class="menu" href="../images/header.jpg">View Applicants</a></li>

  </ul>
</div>
</div>
  <div id="container" >
    <div id="sidebar"> 
    <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
       <a class="side" href="#"><label class = "side">  Testing sidebar  </label></a>
    </div>
    <div id="content">



</div>
</div>
<div id ="footer"> </div>

</body>
</html>

对css来说略显新鲜。谢谢

Answer 1

Demo Fiddle

float: top;错了;

float只能是left或right;

将float:right;添加到侧边栏，将float:left;添加到您的容器

 div#sidebar { 
        position: relative;
    border:2px solid #999999;
    Width: 131px;

    padding-bottom: 1000px;
    margin-bottom: -1000px;

    background-color: #c5cfd9;
    overflow: hidden;


    float:right;


    }

    div#content {
    position: relative;
    padding-bottom: 1000px;
    margin-bottom: -1000px;
    border-left: solid 1px #999999;
    top: -65px;
    left: 132px;
    background-color: #f6f4f4;

    float:left;

    }

Learn Css

Answer 2

这比你想要达到的目标更常见：

<强> CSS

#container {
    border: solid 1px #999999;
    border-top: none;
    width: 998px;
    margin-top: 3px;
    margin-left: 115px;
}

#sidebar {
    float: left;
    width: 131px;
    border: 2px solid #999999;
}

#content {
    float: left;
    width: 131px;
    border-left: 1px solid #999999;
}

.floatClear {
    clear: both;
}

<强> HTML

<html>
    <head>
        <title>Page</title>
    </head>
    <body>
        <div id="container">
            <div id="sidebar">
                Text
            </div>
            <div id="content">
                Text
            </div>
            <div class="floatClear"></div>
        </div>
    </body>
</html>

这里实际发生的事情是你排列两个左浮动<div>并使用float: clear;来排除block - 类型<div>的包裹新队。如果它们的宽度（包括填充/边距/边框（左/右））将比#container width更大的总和，它们将只相互包裹。

通过向margin-left CSS添加更多#content，您可以将其放在任意位置，只要有空间将其与#sidebar div一起包含。

小额外

为了避免使用填充/边框使<div>的宽度更宽的经典样式，您可以使用较新的box-sizing功能，其中所有填充和边框宽度将被推到内部，而不是使框大于您在CSS样式表中指定的框：

-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box;    /* Firefox, other Gecko */
box-sizing: border-box;

Answer 3

max-height CSS属性应该可以胜任。

将#Sidebar和#Content的max-height设置为相等的值。

如果您希望其中任何一个长度超过最大高度，您可以添加overflow:scroll。

当项目添加时，Div移动div

3 个答案:

Demo Fiddle

Learn Css