Heim > Web-Frontend > HTML-Tutorial > css双栏布局遇到了一个问题_html/css_WEB-ITnose

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

WBOY
Freigeben: 2016-06-24 11:46:37
Original
1241 Leute haben es durchsucht

nbsp;html>


Pacific Trainls Resort




Pacific Trails Resort




Enjoy Nature in Luxury


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

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;}

这样修改就行了

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage