[英]How do I make a 2 column layout with a fixed header and footer in CSS?
我一直在尋找有關此問題的教程，現在遇到了一個問題。 我有一個布局，其中高度固定為100像素，頁眉高度為50像素。 在我的內容中，左側有一個200px寬的菜單，而右側的內容則填滿了屏幕的其余部分。 我的頁眉，頁腳和菜單都有適用於背景顏色和邊框的樣式。
我想要的是將頁腳保留在窗口底部，或者如果內容較長，則保留在內容的底部。 我希望菜單的高度與內容的高度相同，以便我應用的樣式保持原樣。 我得到的是頁腳停留在內容的底部，因為內容比菜單短，或者菜單底部和頁腳的頂部之間有空隙。
我發現的每個教程都可以解決此問題， 但是要求菜單沒有背景（它使用<body>標簽的背景樣式。正如我所說，我已將應用的樣式附加到菜單上。有沒有一種解決方法這個？
更新：我的資源可以在http://jsfiddle.net/53SZd/3/找到。 這就是我現在所擁有的（如果浮標引起各種頭痛，則道歉），但是如果有辦法讓它看起來像我想要的樣子，我很樂意提出建議。
更新2：我認為我的解釋方式是錯誤的。 我已將一些我想要的圖像上傳到我的Google雲端硬盤中，這些圖像應該可以解釋我的需求。
我衷心感謝在此提供的幫助，但總會有一個警告。 非常感謝Waz的幫助，我真的很感激，但是每個答案我都遇到一個或另一個問題。 我從來沒有意識到要獲得想要的效果會如此艱難-_-“
似乎您可能在菜單上使用了float屬性，如果是這種情況，則必須用頁腳或div清除float，但是查看代碼將對您的回答有很大幫助
一種方法是在您的220px的內容上留一個邊距（菜單不等於200，菜單不等於20）
有同樣的問題，這解決了。
對於頁腳，詹姆斯的解決方案是最好的（請clear : both在頁腳上）
它是這樣工作的： http : //jsfiddle.net/53SZd/19/
編輯：我知道問題在於內容。 給你的菜單top = 111px（標題大小為100，填充為11）和bottom = 51px（高度為50的頁腳，1邊框），頁腳的底部為= 0px;
我真的需要CSS清除帶有頁眉和頁腳的2列布局嗎？
[英]Do I really need css clear for a 2 column layout with header and footer?
CSS 樣式的頁眉、導航、頁腳和部分/旁白.....我如何修復一切？
[英]CSS styling the Header,Navigation,Footer,and Section/Aside.....How do i make everything fixed?
如何使用固定的 header 和頁腳和可滾動內容制作 flex 布局？
[英]How to make flex layout with fixed header and footer and scrollable content?
如何使用固定 header 和頁腳與中間剩余部分制作 CSS 網格
[英]How to make CSS Grid with fixed header and footer with remainder in middle
如何使用CSS將iframe卡在固定的頁眉和頁腳之間？
[英]How can I make my iframe get stuck between a fixed header and footer using css?
我怎樣才能使這個 CSS 基於網格的聖杯布局具有可調整大小的 header、頁腳和側邊欄？
[英]How can I make this CSS Grid-based Holy Grail layout with resizable header, footer, and sidebars?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.
