0

我有一个容器 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 稍有新意。谢谢

4

3 回答 3

0

这将更常见于您想要实现的目标：

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>的并使用 afloat: clear;来排除block-type<div>的换行符。#container只有当它们的宽度（包括 padding/margin/border(left/right)）都比it's更大时，它们才会相互包裹width。

通过向 CSS 添加更多内容margin-left，#content您可以将其放在任何您想要的位置，只要有空间将其与#sidebardiv 一起包含。

小额外

为了避免填充/边框使您的宽度<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;
于 2013-03-18T19:24:12.313 回答
0

演示小提琴

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;

    }

学习 CSS

于 2013-03-18T19:22:11.920 回答
0

max-heightCSS 属性应该可以完成这项工作。

将#Sidebar 和#Content 的最大高度设置为相同的值。

overflow:scroll如果您期望它们中的任何一个的高度超过最大高度，您可以添加。

于 2013-03-18T19:34:27.283 回答