Question

我正在编写一个网站，我正在尝试做一些我不确定的事情。我有一个我喜欢的布局，但我想允许div调整大小以适应浏览器。在那一刻，布局是这样的： Current Layout 现在我想保持标题部分的高度和宽度始终相同，与extra和footer div相同。但我希望导航（它需要重命名）和内容divs自动调整，以便始终填充浏览器窗口（理想情况下，顶部和底部有10px边框，但不是必需的）。整个页面（显然不包括背景）目前保存在容器内。但这是一个固定的高度。这是我的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上有一个滚动条，我理想情况下不希望在整个屏幕的页面右侧有一个滚动条。

P.S我不是在网站评论之后，这个网站对我来说不是一个想要为她设计的网站的亲戚，而是想要我的背景（我知道它有点花哨）

更新好的，感谢Hristo我的布局就像我现在想要的那样减去一个小细节），下面的屏幕截图显示了现在的页面，我看到的是顶部的导航按钮（只是应用了边框的跨度标签） ...我希望它们与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;
}

The Layour now