HTML / CSS：遇到有关网站宽度/高度的问题 [英] HTML / CSS: Experiencing Issues Regarding Site Width / Height
问题描述
我正在设置一个网站广告区域供人们访问作为我自己的任务。
I am in the process of setting up a website advertising a region for people to visit as a task for myself.
我花了一些时间试图将所有我已经完成的所有在一个页面上。我希望没有滚动条，我不想使滚动条不可见等等，我的意思是网页适合浏览器的一个页面，而用户不需要为了美观目的滚动。
I have spent some time attempting to place all I have done so far all on one page. I wish for there to be no scrollbars, I do not want to make the scrollbars invisible or so forth, I mean have the web page fit on one page of the browser without the user having the need to scroll for aesthetic purposes.
我玩过的div的宽度和高度以及一些其他的东西，试图实现我想要的结果，但没有成功不幸的是。我需要改变关于我的代码，以实现这一点？
I have played around with the width and height of divs along with a number of other things in an attempt to achieve my desired result but with no success unfortunately. What would I be required to change regarding my code in order to achieve this?
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>
推荐答案
类似于以下内容：
它不是很多，但给出一个想法，但它也将取决于屏幕内容和你想要在那里，
Its not much but gives an idea, but it will also depend on the screen content and how much you want on there, too much then this could cause an issue, minimalistic then fine but the kitchen sink then ouch!
<div class="container">
<header>
<div class="logo">
<a href="#">Visit Clare Ireland</a>
</div>
<nav>
<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>
</nav>
</header>
<main>
<section>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis quis laborum, ea repellat! Eius sint, minima nulla asperiores excepturi. Fuga libero exercitationem soluta nam perspiciatis, sit iusto enim asperiores quibusdam.
</section>
</main>
<footer>
<p>Footer content</p>
</footer>
</div>
CSS
html,
body {
margin: 0;
padding:0;
box-sizing: border-box;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
font-size: 16px;
}
header {
margin: 0 auto;
padding: 0;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 80px;
background: #292526;
color: white;
overflow: hidden;
box-sizing: inherit;
}
header:before,
header:after {content: " ";display: table;}
header:after {clear: both;}
header .logo {
margin-top: 20px;
position: relative;
float: left;
width: 40%;
}
header nav {
position: relative;
float: left;
width: 60%;
text-align: left;
}
header a:link,
header a:visited,
header a:active {
margin: 0 auto;
padding: 0;
padding-left: 20px;
font-size: 26px;
text-decoration: none;
color: white;
text-align: center;
}
nav ul {
list-style: none;
}
nav ul li {
display: inline-block;
}
nav ul li a:link,
nav ul li a:visited,
nav ul li a:active {
margin: 0;
padding: 0;
font-size: 12px;
text-decoration: none;
color: white;
}
main {
margin: 0;
padding: 0;
position: fixed;
top:80px;
bottom: 50px;
left: 0;
right:0;
width: 100%;
height: 100%;
background: white url('http://i.imgur.com/VsIRZNZ.jpg') no-repeat center center;
background-size: cover;
}
main section {
margin: 0;
padding: 20px;
position: relative;
top: 20px;
bottom: 20px;
left: 20px;
right: 20px;
width: 93%;
background: rgba(255,255,255,.4);
}
footer {
margin: 0 auto;
padding: 0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 40px;
background: #292526;
color: white;
}
footer p {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
font-size: 12px;
text-transform: uppercase;
}
这篇关于HTML / CSS：遇到有关网站宽度/高度的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
