两个固定宽度的全高度列，具有到空白的无缝过渡 [英] Two fixed width full height columns, with seamless transition to blank space
问题描述
在创建此设计时遇到问题。 #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 融合，创建从
#navigation 并且 #content 应该是唯一可见的。
#container 与另外两个div包含与 #navigation 和 #content ，但是弄糟了它，并把它从中心。如何让我的 #container 居中，并在每一边都有两个div来填充剩余空间？
< ;！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>
I'm having trouble creating this design. The #container should be centered, with it's two children #navigation and #content stretching to the bottom of the browser. Like this for example.
#container {
width: 960px;
height: 100%;
margin: 0 auto;
}
#navigation {
width: 200px;
height: 100%;
float: left;
}
#content {
width: 760px;
height: 100%;
float: left;
}
But I don't know how I can create the colored blank spaces outside the container, which will blend in with the #navigation and #content creating a seamless transition from the #container to the blank space outside.
The transition between the #navigation and the #content should be the only visible.
I've tried floating the #container with two other div's containing the same background-color as #navigation and #content, but that messes it up, and trows it out of the center. How can I have my #container centered and have two div's on each side to fill in the remaining space?
Also, the blue and the red "blank" spaces was supposed to be equally wide. Besides that the drawing is accurate.
<!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>
这篇关于两个固定宽度的全高度列，具有到空白的无缝过渡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
