网站2 divs自动调整高度

时间:2011-05-02 18:08:58

标签: css html

我正在编写一个网站,我正在尝试做一些我不确定的事情。我有一个我喜欢的布局,但我想允许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

1 个答案:

答案 0 :(得分:0)

更新2

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

另外,请查看this article on horizontally centering menus

顺便说一下,我想就你的网站布局给我两分钱。您绝对需要考虑重组和重新组织您的网站。许多用户会对当前的布局感到沮丧。

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

但这只是我的意见。

如果您有其他问题,请告诉我。

更新

这样的事情...... http://jsfiddle.net/UnsungHero97/qe6P8/9/embedded/result/


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

问题complicated CSS layout... need some help
回答one of the answersthe fiddle for the layout

...您可能会对如何实现您所寻找的目标有所了解。

我希望这会有所帮助 赫里斯托斯