如何讓頁眉佔據瀏覽器窗口的整個寬度時使頁面居中？

-2

我在網上看到大量的演示，關於如何「簡單」將內容置於頁面上。我想出瞭如何讓我的頁眉佔據瀏覽器窗口的整個寬度，但是每當我嘗試以我的內容爲中心時，所有的瀏覽器都會擴展頁面的寬度，所以我最終得到了一個水平滾動條。另一個問題是我的頭文件與我的其他瀏覽器顏色不同，所以當我對文本進行更改時，它有時會更改頭文件的寬度，以使顏色不填充窗口。這個網站是我試圖實現的一個很好的例子http://carlodiego.businesscatalyst.com/如何讓頁眉佔據瀏覽器窗口的整個寬度時使頁面居中？

我也想讓我的頭部溢出：none;所以如果有人使瀏覽器窗口變小，標題開始消失。無論我做了什麼其他事情，我一直在爲此工作數小時。以下是我的代碼。對不起，但它很長。

<body> 
<header> 
    <div id="wrapper"> 
     <div id="fixed"> 
      <div id="menu-container"> 
       <ul id="navigationMenu"> 
        <li><a href="#" class="normalMenu">Home</a></li> 
        <li><a href="#" class="normalMenu">About</a></li> 
        <li><a href="#" class="normalMenu">Work</a></li> 
        <li><a href="#" class="normalMenu">Contact Me</a></li> 
       </ul> 
      </div> 
      <div id="title"> 
      <h1>Alex</h1> 
      <h1 id="last">Chaparro</h1> 
      </div> 
     </div> 

</header> 

     <div id="background"> 

     <div id="front-end"> 
      <h1>Front-End <br> Developer</h1> 
     </div> 
     <div id=content> 

      <h1 class="heading">About</h1> 
      <p>content</p> 

      <h2>Currently Using</h2> 
      <p>More Content...</p> 

      <h2>Currently Following</h2> 
      <p>Chris Mills | David Sawyer Mcfarland | Phil Thompson </p> 

      <h1 class="heading">Work</h1> 

     </div> 
     </div> 
</div> 
</body> 


body { 
    margin: 0; 
    padding:0; 
    border: 0; 
    font-size: 100%; 
    line-height: 1.5; 
    font-family: 'optimusprincepssemiboldRg'; 
    background: #fafafa; 

    background-color: #eeeeee; 
    } 



article, aside, audio, canvas, datalist, details, figcaption, figure, footer, header, hgroup, menu, nav, section, video { 
    display: block; 
} 

#title { 
    font-family: 'optimusprincepssemiboldRg'; 
    color: black; 
} 

#last { 
    font-size: 400%; 
    line-height: 0; 
    margin-top: 40px; 
} 

#menu-container { 
    position: absolute; 
    margin-left: 420px; 
    white-space: nowrap; /* stops text from wrapping */ 
    overflow: hidden; 
} 

#background { 
    background-color: #eeeeee; 
    position: absolute; 
    height: 100%; 
    margin-top: 20px; 
    margin-left: 20%; 
    margin-right: 20%; 
} 

#front-end { 
    margin-top: 100px; 
    font-size: 200%; 
    width: 100%; 
    text-align: center; 
} 

.heading { 
    font-size: 300%; 
} 

#fixed { 
    position: relative; 
    height: 200px; 
} 

header { 
    width: 100%; 
    overflow: hidden; /*This stops the color from going away*/ 
    background-color: #cee3ee; 
} 

#wrapper { 
    margin-left: 20%; 
    margin-right: 20%; 
}

來源

2013-03-17 London804

通過「瀏覽器」我想你的意思是視口？瀏覽器是一個軟件。不是你在網站上看到的東西。而通過居中，你是指垂直或水平居中？ – Terry 2013-03-17 03:38:15

顯示您的代碼嘗試，以便我們有一些「修復」。我們不打算從頭開始編寫一個頁面。 – Sparky 2013-03-17 03:42:05

你想有一個header和main的div。並使其定位於absolute。和使用margin:0px auto;爲主中心。

這樣的事情http://jsfiddle.net/WAR4r/

來源

2013-03-17 03:49:46 btevfik

這讓我走向了正確的方向。當您最小化頁面時，頂部的顏色不會佔用全部寬度。如果我沒有更清楚地說明問題，我很抱歉。我沒有把我的代碼放在那裏，因爲我認爲這會很長時間，下次就會完成。 – London804 2013-03-17 04:18:45

你是什麼意思頂部的顏色？如果您的意思是標題，那麼無論頁面大小如何，它都會佔用整個寬度。 – btevfik 2013-03-17 04:20:33

沒問題。很高興它有幫助。 – btevfik 2013-03-17 04:32:59

如何讓頁眉佔據瀏覽器窗口的整個寬度時使頁面居中？

回答

相關問題