Question

我在修复此问题时遇到问题。我没有使用bootstrap，因为我没有启动时启动（并且不确定引导程序是否可以执行此操作）。我有一个全宽度的布局与固定的菜单宽度。然后我的内容区域应该是动态的，因为我希望它能够响应。

http://send2list.com/help/troubleshoot.html

<!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" dir="ltr" lang="da-DK">
<head>
    <title></title>
</head>
<body style="background-color:#e0e0e0;color:#fff;margin:0px;">

  <div style="width:100%;">
      <div style="background-color:#000;">
        <div style="float:left;background-color:#222223;width:900px;">Content Area<br> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
        <div style="float:right;background-color:#499939;">Right Menu<br>Right menu is fixed with 240px</div>

      </div>
  </div>
</body>
</html>

Answer 1

是的，可以通过将div设置为display: table-cell（display: table-cell完全支持）而不是float: left来完成此操作。第一个div是百分比，第二个是固定宽度。容器需要设置为display: table和table-layout: fixed才能强制执行固定宽度：

<强> HTML

<div class="container">
  <div class="one">Content Area<br/> Content width should be responsive. Right now it is set to width 900px. But if user were to resize screen, it should be smaller. Any way to do this with just CSS?</div>
  <div class="two">Right Menu<br/>Right menu is fixed with 240px</div>
</div>

<强> CSS

.container{
  width: 100%;
  display: table;
  table-layout: fixed;
}

.one{
  display: table-cell;
  vertical-align: top;
  /*width: 85%;*/ //REMOVE as VitorinoFernandes pointed out, this is not necesssary seeing how setting the div to display: table-cell within a container set to "display: table" will take the remaining width
  background: #222223;
}

.two{
  display: table-cell;
  vertical-align: top;
  width: 240px;
  background: #499939;
}

FIDDLE

Answer 2

您可以使用calc将主区域设置为100％ - 240px。只要您不需要支持IE8，Calc支持就很好：http://caniuse.com/#feat=calc

Fiddle

.main {
    float:left;
    background-color:#222223;
    width: calc(100% - 240px);
}
.sidebar {
    float:right;
    background-color:#499939;
    width: 240px;
}

全宽CSS，2列，固定菜单宽度和动态内容宽度

2 个答案: