css双栏布局遇到了一个问题_html/css_WEB-ITnose

程序员文章站 2022-05-13 16:49:02

...

Pacific Trainls Resort

Pacific Trails Resort

Home

Yurts

Activities

Reservations

Enjoy Nature in Luxury

Pacific Trails Resort offers a special lodging experience on the California North Coast,Relax in serenity with panoramic views of the pacificOcean.

Private yurts with decks overlooking the ocean

Activities lodge with fireplace and gift shop

Nightly fine dining at the Overlook Cafe

Heated outdoor pool and whirpool

Guided hiking tours of the redwoods

Pacific Trails Resort

12010 pacific Trails Road
Zephyr,CA 95555
888-555-5555

css文件：
body{
background-color: #ffffff;
color: #666666;
background-image: url(bg.jpg);
background-repeat: no-repeat;
font-family: Arial,Helvetica,sans-serif;
background-attachment: fixed;
}
#wrapper{
margin: auto;
width: 80%;
min-width: 960px;
background-color: #ffffff;
box-shadow: 5px 5px 5px #000033;
min-height: 500px;
}
h1{
background-color: #90c7e3;
color: #ffffff;

background-position: right;
background-repeat: no-repeat;
height: 60px;
padding-top: 20px;
font-family: Georgia,"Times New Roman",serif;
margin-bottom: 0;
}
#nav{
background-color: #90c7e3;

font-weight: bold;
float: left;
width: 140px;

display: block;
margin: auto;

}
#nav ul{
list-style-type: none;
padding:0;
margin: 0;
font-size: 1.2em;

#nav a{
text-decoration: none;
border-bottom: #000000 solid .1em;
display: block;
padding: 0;
}
#nav a:link{
color: #ff0000;
}
#nav a:visited{
color:#ff1100;
}
#nav a:hover{
color: #0000ff;
}
h2 {
font-family: Georgia,"Times New Roman",serif;
color: #3399cc;
text-shadow:1px 1px 1px #ccc;
}
#content{
color: #000000;
padding: 1px 20px 20px 30px;
background-color: #ffffff;
margin-left: 150px;
overflow: auto;

}
#content img{
float: left;padding-right: 20px;
}
#content ul{
list-style-position:inside;
}
.resort{
font-weight: bold;
color: #000033;
}
h3{
color: #000033;
font-family: Georgia,"Times New Roman",serif;
};
#contact{
font-size: 90%;

}
#footer{
font-size: 75%;
font-style: italic;
font-family: Georgia,"Times New Roman",serif;
text-align: center;
clear: both;

}

这样弄出来的界面，左侧导航栏只有一小块，背景不能完全覆盖，这该怎么做呢，要是设置一个固定的高度。一旦网页内容改变了肯定又不行了，我前面做过差不多的这种网页，但是导航栏float之后能自动调节高度。这个不行了，不知道该怎么解决。求高手解答。

回复讨论(解决方案)

#wrapper{overflow:hidden;}
#nav{padding-bottom:10000px;margin-bottom:-10000px;}

把上面样式加到对应地方。

这个真的可以诶。不过为什么呢。我原来也弄过一个类似的，可是不用加这些，也不用设置高度什么的。就会自动填上了。

#content {background-color: #fff;overflow: hidden;}
#wrapper 加上 {background-color: #90c7e3;}
h1和#nav 去掉 {background-color: #90c7e3;}

这样修改就行了

声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn核实处理。

css双栏布局遇到了一个问题_html/css_WEB-ITnose

Pacific Trails Resort

Enjoy Nature in Luxury

回复讨论(解决方案)

新手求助，一个页面布局的问题。_html/css_WEB-ITnose

新手求助，一个页面布局的问题。_html/css_WEB-ITnose