html - 在一个 div 中对齐 div 内容

Question

我有一个 2 列的 div，左列是导航栏，右列是页面内容

在 chrome 中，所有显示都正确，但是在 ie 中，第二列的内容显示为第二列，但是它的显示从导航栏的底部开始，将导航栏的高度保留为内容列中的空白区域

请告诉我如何解决这个问题

#wrapper {
  margin-left: 250px;
  position: relative;
  margin-top: 0;
  top: 0;
}

#content {
  float: right;
  width: 100%;
  margin-left: 5px;
  background-color: white;
}

#sidebar {
  float: left;
  width: 250px;
  margin-left: -250px;
  background-color: #FFA;
}

#cleared {
  clear: both;
}

body {
  font: 11px 'Trebuchet MS';
  color: #404040;
}

fieldset,
legend {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  top: 0;
}

<div id="wrapper">

  <div id="sidebar">
    <cfinclude template="navbar.cfm">
  </div>

  <div id="content">
    <fieldset>
      <cfinclude template="b2b_add_device.cfm">
        <cfabort>
    </fieldset>

  </div>
</div>

Answer 1

您可以检查以下代码段:

#wrapper {
  position:relative; 
  margin-top:0; 
  top:0;
}
#content {
  margin-left:250px;
  background-color: white;
}
#sidebar {
  float: left;
  width: 250px;
  background-color: #FFA;
}
#cleared {
  clear: both;
}

body {
    font: 11px 'Trebuchet MS';
    color: #404040;
}

fieldset, legend {
    margin:0;
    padding:0;
    width:100%;
    height:100%; top:0;
}

<div id="wrapper">

<div id="sidebar"><cfinclude template="navbar.cfm"></div>

<div id="content">
<fieldset>
    <cfinclude template="b2b_add_device.cfm"> 
    <cfabort>
</fieldset>