1
我正在建立一个网站,宣传一个区域供人们作为我自己的任务访问。HTML/CSS:遇到关于网站宽度/高度的问题
我花了一些时间试图将我迄今为止所做的所有工作都放在一个页面上。我希望那里没有滚动条,我不想让滚动条不可见,等等,我的意思是让网页适合浏览器的一个页面,而不需要用户为了审美目的而滚动。
为了达到我想要的效果,我玩弄了divs的宽度和高度以及许多其他的东西,但遗憾的是没有成功。为了实现这一目标,我需要更改哪些关于我的代码的内容?
body,
td,
th {
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
}
body {
margin: 0px;
}
#navigation {
color: white;
background-color: #292526;
width: 100%;
padding: 0.5% 0.5%;
}
#navigationLeft {
width: 24.5%;
display: inline-block;
vertical-align: middle;
font-size: 180%;
}
#navigationRight {
width: 74.5%;
display: inline-block;
vertical-align: middle;
}
#navigation ul {
float: right;
}
#navigation ul li {
display: inline;
}
#navigation a {
font-size: 120%;
color: white;
text-decoration: none;
}
#banner {
line-height: 0;
}
#footer {
color: white;
background-color: #292526;
width: 100%;
padding: 0.5% 0.5%;
text-align: center;
}
<div id="container">
<div id="navigation">
<div id="navigationLeft">
<a href="#">Visit Clare Ireland</a>
</div>
<div id="navigationRight">
<ul>
<li><a href="#">Home |</a>
</li>
<li><a href="#">Maps |</a>
</li>
<li><a href="#">Hotels |</a>
</li>
<li><a href="#">Appartments |</a>
</li>
<li><a href="#">Attractions |</a>
</li>
<li><a href="#">Essentials |</a>
</li>
<li><a href="#">Bars & Clubs |</a>
</li>
<li><a href="#">Transport</a>
</li>
</ul>
</div>
</div>
<div id="banner">
<img src="http://i.imgur.com/VsIRZNZ.jpg" alt="The Cliffs of Moher" />
</div>
<div id="footer">
<p>Placeholder Text</p>
</div>
</div>
所以..它应该规模? – GolezTrol
如同在,无论分辨率,长宽比等,它总是适合在一个页面上,而不需要用户滚动? - 是 – Aontaigh
你只想在'CSS'中解析它吗?如果是这样,请使用[媒体查询](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries),否则您可以通过JavaScript/jQuery来实现。你也可以使用[that](https://css-tricks.com/perfect-full-page-background-image/),并应用于主div。 –