[英]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.
