HTML/CSS：遇到關於網站寬度/高度的問題

Question

我正在建立一個網站，宣傳一個區域供人們作爲我自己的任務訪問。

我花了一些時間試圖將我迄今爲止所做的所有工作都放在一個頁面上。我希望那裏沒有滾動條，我不想讓滾動條不可見，等等，我的意思是讓網頁適合瀏覽器的一個頁面，而不需要用戶爲了審美目的而滾動。

爲了達到我想要的效果，我玩弄了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>

Answer 1

也有類似以下內容：

Example here

它的不是很多，但給出了一個想法，但它也將取決於屏幕上的內容有多少你想在那裏，太多，這可能會導致一個問題，簡約然後罰款，但廚房水槽然後哎！

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