我在创建这个设计时遇到了麻烦. #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>
