固定頁腳與100高度的絕對位置身體和jQuery的滾動菜單

我創建一個新的網站與1024寬度框架。我需要100％寬度的頁眉，頁眉，菜單和100％頁腳寬度。但我需要1024像素寬度的內容佔位符。我試圖設置100％的高度內容。比如說，如果內容佔位符的內容較少，則頁腳需要粘貼到頁面的底部，如果內容佔位符的內容較多，則需要滾動整個頁面。這裏是代碼示例：

固定頁腳與100高度的絕對位置身體和jQuery的滾動菜單

<div style="width: 100%; height: 30px; background: #dddedf url('Images/top-header-bg.png') repeat-x top left;position: relative;"> 
<div style="width: 1024px; margin: 0 auto;"> 
     <div style="padding: 0 10px;"> 
       <!--Top Header Section--> 
     </div> 
    </div> 
</div> 

<div style="width: 100%; height: 100px; background: #fff url('Images/header-bg.png') no-repeat center center; 
    position: relative;"> 
    <div style="width: 1024px; margin: 0 auto;"> 
     <div style="padding: 0 10px;"> 
       <!--Header Section--> 
     </div> 
    </div> 
</div> 

<div style="width: 100%; height: 30px; background: #0D9B8C url('Images/menu-bg.png') repeat-x top left; 
    position: fixed;"> 
    <div style="width: 1024px; margin: 0 auto;"> 
     <div style="padding: 0 10px;"> 
      <div style="width: 100%; height: 30px;"> 
        <!--Menu Section--> 
      </div> 
     </div> 
    </div> 
</div> 

<div style="width: 100%; position: fixed; top: 160px; height: 100%; margin-bottom: -40px;"> 
    <div style="width: 1024px; margin: 0 auto; background: #fff url('Images/body-bg.png') repeat-x fixed top left; 
     height: 100%;"> 
     <div style="padding: 0 10px;"> 
<!--Main Content Section--> 
     </div> 
    </div> 
</div> 

<div style="width: 100%; height: 40px; background: #dddedf url('Images/footer-bg.png') repeat-x bottom left; 
    position: fixed; bottom: 0;"> 
    <div style="width: 1024px; margin: 0 auto;"> 
     <div style="padding: 0 10px;"> 
       <!--Footer Section--> 
     </div> 
    </div> 
</div>

我需要設置，因爲jQuery的滾動菜單的主要內容佔位符的絕對位置。如果我設置了相對位置，則在訪問菜單時，主內容佔位符內的文本會被封裝。有關此問題的更多詳細信息，請參閱此question。

這是demo，這是jsfiddle。我做錯什麼了嗎？解決方案和建議是最受歡迎的。

在此先感謝。

來源

2012-10-20 Ravimallya

也許考慮使用Twitter的bootstrap？這對於響應式設計非常適用，並且可以將元素固定到頁面的頂部和底部。

http://twitter.github.com/bootstrap/

來源

2012-10-20 17:05:03 Ollie

謝謝@Ollie。但我真的不想使用引導。因爲我的框架（一個asp.net web應用程序）需要最大寬度爲1024px，而他們（客戶）不需要940px或1200px框架。所以，我很難得到我想要的和客戶需要的東西。我也試過這個[link]（http://jsfiddle.net/ravimallya/g2FXn/1/）。我在CSS中做錯了什麼？再次感謝。 – Ravimallya

您可以將引導程序修改爲僅使用所需的寬度。瀏覽文檔中的腳手架頁面，並設置頁面，使其不再響應。但是，您應該能夠針對具有這些不同大小選項的響應式設計進行爭論，因爲它允許網站在更廣泛的屏幕尺寸選擇上看起來很棒。 – Ollie

好的。謝謝。將試圖與bootstrap ...希望一切都會好起來的。 :)當我完成後，我會發布我的解決方案。 – Ravimallya

固定頁腳與100高度的絕對位置身體和jQuery的滾動菜單

回答

相關問題