css – 两个固定宽度的全高柱,可无缝过渡到空白区域

我在创建这个设计时遇到了麻烦. #container应该居中,它的两个孩子#navigation和#content伸展到浏览器的底部.比如这样.

#container {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
#navigation {
  width: 200px;
  height: 100%;
  float: left;
}
#content {
  width: 760px;
  height: 100%;
  float: left;
}

但我不知道如何在容器外部创建彩色空格,这将与#navigation和#content融合,创建从#container到外部空白区域的无缝过渡.

#navigation和#content之间的转换应该是唯一可见的.

我已经尝试将#container与另外两个包含与#navigation和#content相同的背景颜色的div浮动,但这会使它混乱,并将其拖出中心.我怎样才能让我的#container居中并且每边都有两个div来填充剩余的空间？

此外,蓝色和红色的“空白”空间应该同样宽.除此之外,绘图是准确的.

解决方法

见： http://jsbin.com/amunuz

<!DOCTYPE html>
<html>
<head>
<Meta charset=utf-8 />
<title>JS Bin</title>
<style>
  html,body {
    height: 100%;
  }
  body {
    margin: 0;
    background: -moz-linear-gradient(left,#ff0000 50%,#00a9ff 50%);
    background: -webkit-gradient(linear,left top,right top,color-stop(50%,#ff0000),#00a9ff));
    background: -webkit-linear-gradient(left,#00a9ff 50%);
    background: -o-linear-gradient(left,#00a9ff 50%);
    background: -ms-linear-gradient(left,#00a9ff 50%);
    background: linear-gradient(left,#00a9ff 50%);
  }
  #container {
    height: 100%;
    display: table;
    table-layout: fixed;
    width: 960px;
    margin: 0 auto;
  }
  #navigation {
    display: table-cell;
    width: 200px;
    background: #ff0000;
  }
  #content {
    display: table-cell;
    background: #00a9ff;
  }
</style>
</head>
<body>
  <div id="container">
    <div id="navigation">navigation</div>
    <div id="content">content</div>
  </div>
</body>
</html>

css – 两个固定宽度的全高柱,可无缝过渡到空白区域

解决方法

相关文章