Fatal编程技术网
  • css/
  • Css 两个固定宽度的全高列，无缝过渡到空白

Css 两个固定宽度的全高列，无缝过渡到空白

css

Css 两个固定宽度的全高列，无缝过渡到空白,css,Css,我在创建此设计时遇到问题。#容器应该居中，它的两个子项#导航和#内容延伸到浏览器底部。比如说这个 #container { width: 960px; height: 100%; margin: 0 auto; } #navigation { width: 200px; height: 100%; float: left; } #content { width: 760px; height: 100%; float: left; } 但是我不知道如何创建容器

我在创建此设计时遇到问题。
#容器
应该居中，它的两个子项
#导航
和
#内容
延伸到浏览器底部。比如说这个

#container {
  width: 960px;
  height: 100%;
  margin: 0 auto;
}
#navigation {
  width: 200px;
  height: 100%;
  float: left;
}
#content {
  width: 760px;
  height: 100%;
  float: left;
}
<>但是我不知道如何创建容器外部的彩色空白空间，它将与<代码>导航> <代码>和<代码>内容> <代码> >创建一个无缝的转换，从<代码>容器>代码>到外部空白空间。

#导航
和
#内容
之间的转换应该是唯一可见的

我试着用另外两个div浮动
#容器
，其中包含与
#导航
和
#内容
相同的背景色，但这会把它搞砸，并将它从中心拖出去。我怎样才能使我的
#容器
居中，并且在每侧有两个div来填充剩余的空间

此外，蓝色和红色的“空白”空间应该同样宽。此外，图纸准确无误。

请参见：


JS-Bin
html，正文{
身高：100%；
}
身体{
保证金：0；
背景：-莫兹线性梯度（左，#ff0000 50%，#00a9ff 50%）；
背景：-webkit渐变（线性、左上、右上、颜色停止（50%，#ff0000）、颜色停止（50%，#00a9ff））；
背景：-webkit线性梯度（左，#ff0000 50%，#00a9ff 50%）；
背景：-o-线性梯度（左，#ff0000 50%，#00a9ff 50%）；
背景：-ms线性梯度（左，#ff0000 50%，#00a9ff 50%）；
背景：线性梯度（左，#ff0000 50%，#00a9ff 50%）；
}
#容器{
身高：100%；
显示：表格；
表布局：固定；
宽度：960px；
保证金：0自动；
}
#航行{
显示：表格单元格；
宽度：200px；
背景：#ff0000；
}
#内容{
显示：表格单元格；
背景：#00a9ff；
}
航行
内容
您需要支持哪些浏览器？@thirtydot更新的浏览器。在这件事上，我不再关心IE6了。你想要一个更具体的答案吗？这就是你想要的吗？我还为我的答案添加了一个jsbin：thirtydot和Ben Lee的解决方案都有效！谢谢这只是我的一个回答，似乎是-moz、-webkit和-ms标签起了作用。我以前从未用过，所以用起来不够。你有没有一个网站或资源可以让我读到这类东西？非常感谢。不客气。只需谷歌“CSS3梯度”搜索所有你想要的信息。不过，在这种情况下，实际上并不需要CSS渐变。我只是为了方便才用的。你可以用一个宽的<代码>背景图像用两种颜色在中间相遇，像这样：（图像：）另一件事：代码>显示：表胞将在除IE7之外的所有现代浏览器中工作，如果这很重要的话。 
<!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), color-stop(50%,#00a9ff));
    background: -webkit-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -o-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: -ms-linear-gradient(left, #ff0000 50%,#00a9ff 50%);
    background: linear-gradient(left, #ff0000 50%,#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>