HTML / CSS：遇到有关网站宽度/高度的问题

我正在建立一个网站，为人们访问的区域做广告，作为我自己的一项任务。

我花了一些时间尝试将迄今为止所做的所有工作都放在一页上。我希望没有滚动条，我不想让滚动条不可见等等，我的意思是让网页适合浏览器的一页，而用户无需出于美观目的而滚动。

我尝试过调整 div 的宽度和高度以及其他一些东西，试图达到我想要的结果，但不幸的是没有成功。为了实现这一目标，我需要对我的代码进行哪些更改？

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>

类似于以下内容：

示例在这里 http://codepen.io/anon/pen/yeRWGM

它不多，但提供了一个想法，但它也取决于屏幕内容以及你想要的数量，太多的话可能会导致问题，简约然后很好，但厨房水槽那么哎哟！

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