Question

我构建了一个简单的页面示例，其中包含左固定宽度菜单和右侧DIV，用于显示页面内容。它们都进入#main div，它被设置为占整个页面的100％。

我需要菜单和显示页面并排，菜单总是固定在100px，显示器DIV一直适应剩余的空间。

到目前为止我的代码

＆＃13;

#main {
  float: left;
  display: block;
  color: white;
  width: 100%;
  background-color: #333;
}

#menu {
  float: left;
  display: inline-block;
  width: 100px;
  background-color: #555;
}

#display {
  float: left;
  display: inline-block;
  background-color: #888;
}

＆＃13;

<div id='main'>
  <div id='menu'>menu <br><br><br><br></div>
  <div id='display'>lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page <br><br><br><br></div>

</div>

＆＃13;

所以他们到目前为止显示确定，但我需要并排排列的2个孩子DIV

谢谢！

我喜欢它，如果有可能没有 table-cell或flex

Answer 1

您正在使用100px至#menu，因此请将剩余空间分配给#display

#display {
  float: left;
  display: inline-block;
  background-color: #888;
  width: calc(100% - 100px);
}

Answer 2

根据建议，您需要CSS calc()函数减去#menu的固定宽度，其他集height为auto和{{ 1}}。使用100%或float，您已包含两者。

＆＃13;

display:inline-block

＆＃13;

#main {
  float: left;
  color: white;
  width: 100%;
  height: 100%;
  background-color: #333;
  display: block;
}

#menu {
  width: 100px;
  height: auto;
  background-color: #555;
  display: inline-block;
}

#display {
  background-color: #888;
  width: calc(100% - 105px);
  height: auto;
  display: inline-block;
  vertical-align: top;
}

＆＃13;

选中此jsFiddle，向前和向后缩放以查看父div的高度自动增加。

对齐菜单并在父页面DIV中显示DIV

2 个答案: