网站2div自动调整高度

Question

我正在编写一个网站的代码，我试图做一些我不确定是可能的事情。我有一个我喜欢的布局，但我希望允许div调整大小以适应浏览器。在这一分钟，布局如下：

现在，我想让页眉部分始终保持相同的高度和宽度，与额外的和页脚的div一样。但我希望导航(需要重命名)和内容div自动调整，以便始终填充浏览器窗口(理想情况下，顶部和底部有10 at边框，但没有必要)。整个页面(显然不包括背景)目前保存在一个容器内。但这是一个固定的高度。这是我的CSS

html,body{
    margin:0;
    padding:0;
}
body{
    background-image:url(images/bg2.jpg);
}
a{
    text-decoration: none;
}
#container{
    text-align:left;
    width:1000px;
    height:648px;
    margin: 0 auto;
    border-radius:30px;
    padding-top:10px;
    padding-left:10px;
    padding-right:10px;
    padding-bottom:10px;
}
#header{
    float:left;
    height:123px;
    width:1000px;
    background-color:#FFFFFF;
    border-top-right-radius:30px;
    border-top-left-radius:30px;
    text-align:center;
}
#links{
    float:left;
    height:43px;
    width:714px;
    background-color:#FFFFFF;
    text-align:center;
    padding-left:286px;
}
.link span{
    list-style: none;  
    border: 6px solid #1c2f45;
    font-size: 13px;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
.linkcurrentpage span{
    list-style: none;  
    border: 6px solid #1c2f45;
    background-color: #1c2f45;
    font-size: 13px;
    color: #FFFFFF;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
#content{
    position:relative;
    float:right;
    height:420px;
    width:737px;
    background-color:#FFFFFF;
    overflow:auto;
}
#galleryselector {
    float: left;
    text-align: center;
}
#navigation{
    float:left;
    width:263px;
    height:420px;
}
#extra{
    background:#FFFFFF;
    float:right;
    height:70px;
    width:1000px;
}
#footer{
    background:#FFFFFF;
    float:right;
    height:40px;
    width:1000px;
    margin: 0 auto;
    padding-bottom:5px;
    text-align: center;
    border-bottom-left-radius:40px;
    border-bottom-right-radius:40px;
}
#footer p{
    margin: 0 auto;
}

有人能告诉我如何做到这一点吗？我不太关心在内容div上有一个滚动条，我只是在理想情况下不希望整个屏幕在页面的右边有一个滚动条。

我不是在网站评论之后，这个网站不适合我，因为我的亲戚想要一个为她设计的网站，并想要我放的背景(我知道它有点花哨)

更新： Ok所以感谢Hristo，我现在想要的布局没有一个小细节)，下面的屏幕截图显示了页面现在是如何运行的，我的切换点是顶部的导航按钮(仅仅是应用了边框的跨标签)，...I希望它们集中对齐到div，我以前找到的唯一方法就是将固定数量的填充应用到div中，但我不知道它是否会再次工作……我将上传一个屏幕快照(的蓝色边框围绕一个h1标签，已经运行了F12开发工具)，以及现在的链接部分的css。

#links{
    float:left;
    height:43px;
    width:100%;
    background-color:#FFFFFF;
    text-align:center;
}
.link span{
    list-style: none;  
    border: 6px solid #1c2f45;
    font-size: 13px;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}
.linkcurrentpage span{
    list-style: none;  
    border: 6px solid #1c2f45;
    background-color: #1c2f45;
    font-size: 13px;
    color: #FFFFFF;
    height: 25px;
    text-align: center;
    border-radius: 1em 4em 1em 4em;
    float: left;
    margin-left: 5px;
    padding-top:5px;
    width:90px;
}

​

​

Answer 1

更新2

看看小提琴..。http://jsfiddle.net/UnsungHero97/jbQfr/1/

另外，看看本文讨论的是水平对齐菜单。。

顺便说一下，我想给你我的两分钱关于你的网站布局。您肯定需要考虑重组和重组您的网站。许多用户会对当前的布局感到沮丧。

例如，尝试调整浏览器的水平和垂直大小.注意窗口太短或太窄时的行为；考虑使用min-width和min-height。

但这只是我的观点。

如果你还有其他问题请告诉我。

更新

这样的事怎么样..。http://jsfiddle.net/UnsungHero97/qe6P8/9/embedded/result/

我最近问了一个问题，关于设计一个类似于你的设计。看看这个问题..。

问题：复杂的CSS布局..。需要帮助

答案：答案之一和布局的小提琴

..。你也许能得到一些关于如何实现你想要的东西的想法。

我希望这能帮到你。

赫里斯托