的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

回答

相关问题