的Html佈局問題 - CSS

<body> 
    <form id="form1" runat="server"> 
     <div id="headers"> 
     <header> 
      <div id="Logo"> 
       <img alt="SiteLogo" src="Images/kas.png" style="width:130px;height: 55px;" /> 
      </div> 
      <div id="LogoText">Camphor Works</div> 
      <nav> 
    <ul> 
     <li><a href="Index.aspx">HOME</a> 

     </li> 
     <li><a href="AboutUs.aspx">ABOUT US</a> 

     </li> 
     <li class='has-sub '><a href="Products.aspx">PRODUCTS</a> 

      <ul> 
       <li class='has-sub '><a href='#'>Product 1</a> 
       </li> 
       <li class='has-sub '><a href='#'>Product 2</a> 
       </li> 
      </ul> 
     </li> 
     <li><a href="Services.aspx">SERVICES</a> 

     </li> 
     <li><a href="Enquiry.aspx">ENQUIRY</a> 

     </li> 
    </ul> 
</nav> 
     </header> 
     </div> 
     <section> 
      <article id="Articleleft"> 

      </article> 
      <article id="Articleright"></article> 
     </section> 
     <div id="footer"> 
     <footer> 
      <div id="socialmedia"></div> 
      <div id="QuickLinks"></div> 
     </footer> 
      </div> 
    </form> 
</body>

對於的CSS請小提琴.. !!!

小提琴演示

fiddle

Full page Result of the site

問題

正如你可以在頭的小提琴100% width的整版結果看和頁腳不佔據整個頁面？

我已經花了近兩天的時間弄清楚了，但都是徒勞的。

請幫助我，並指出是否有任何網站的錯誤。

編輯： 我希望頁眉和頁腳分別固定在頂部和底部.. !!他們都應該佔據屏幕的整個寬度..！

但是主要部分將獨自佔領中間地區..！

要更清晰參考圖像..！

enter image description here

感謝

來源

2014-02-15 Amarnath Balasubramanian

似乎是全屏給我（火狐）你想擴大'

''？ –

不，它是全屏幕，水平滾動，你會發現在右邊的空白空間..！ –

我分析你的代碼，它與導航 –

FIDDLE
你必須在CSS來改變這種：

nav ul ul { 
    visibility: hidden; 
    position: absolute; 
    top: 100%; 
    z-index: 598; 
    max-width: 100%; <-- from width to max-width 
    max-height: 100%; <--- from height to max-height 
    bottom: 0; 
    margin-top: 0; 
    text-transform: none; 
    min-width: 190px; 
} 
############################# 
#footer 
{ 
    padding:0px; 
    height:150px; 
    min-width:100%; 
    width: 1000px; <-------- here -------------- 
    clear:both;         - 
    background-color:#333;      - 
    margin-top:10px;        - 
               - 
}            - 
footer           - 
{            - 
    color:#ffffff;        - 
    width: 1000px; <--------- this have be to ----   
    bottom : 0; 
    position:relative; 
}

這會爲頁眉和頁腳中刪除。

enter image description here

來源

2014-02-15 18:32:17

你可以添加評論或給我的評論，我知道我知道我的迴應是有幫助的@AmarnathBalasubramanian –

嘿它解決了標題的問題，但你可以檢查頁腳在小提琴？頁腳的寬度是全尺寸的100％，但當它閃爍時，它佔據了部分的寬度。你能否請檢查一下..！ –

正如我所說的這裏的錯誤在撥弄一個全屏的解決方案 http://jsfiddle.net/V3kDd/embedded/result/ –

我相信這是與你的填充 - 一旦你在導航欄上的文本中使用填充 - 它是有效抵消了與和創造增加。

來源

2014-02-15 18:27:00 BruceWayne

JSFIDDLE

要回答你的，爲什麼你有邊界線和頂部導航之間的空間差距問題::你有一個margin-top: 20px上section

，如果你想頁腳要「粘」並固定在底部添加以下內容到#footer

position: fixed; 
bottom: 0;

來源

2014-02-15 18:32:23 feitla

這是否有任何意義??不，它沒有.. !! :( –

佈局問題 - CSS

小提琴演示

fiddle

Full page Result of the site

回答

相關問題