我已经尝试了所有我能想到的方法。我已经尝试了来自堆栈和教程站点的许多编码示例。无论我做什么，我都无法让它发挥作用，而且我完全无法解决这个问题。我和 CSS 合不来。
这是我正在尝试做的事情:
- 静态 header (始终在屏幕上。)
- 始终位于页面底部的页脚。 (滚动内容，但如果没有足够的内容将出现在屏幕底部。
- 左侧菜单的背景一直延伸到页脚顶部。
我无法让背景一直向下。不能有100%的 parent 亲亲绝对是正常的问题。我现在拥有的这段代码可以正常工作，但背景除外。老实说，我正在考虑将背景制作成图像并重复。这是代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#main_wrapper {
min-height: 100%;
position: relative;
}
#header {
width: 100%;
background:#0F0;
height:42px;
position:fixed;
left: 0;
top: 0;
}
#content {
margin-left: 200px;
background:#F00;
}
#footer {
width:100%;
height:32px;
position:absolute;
bottom:0;
left:0;
background:#00F;
}
#content_wrapper {
padding-bottom: 32px;
padding-top: 42px;
overflow: auto;
}
#left_menu {
width:200px;
background: #FF0;
float:left;
}
</style>
</head>
<body>
<div id="main_wrapper">
<div id="header"></div>
<div id="content_wrapper">
<div id="left_menu">MENU</div>
<div id="content">CONENT</div>
</div>
<div id="footer"></div>
</div>
</body>
</html>
正如您在 Fiddle 代码中看到的那样，我要做的是让黄色背景占据整个高度。添加的任何内容都会导致整个页面滚动，页脚移动到底部，页眉保持不变。除了占据整个高度的黄色背景颜色外，所有这些现在都有效。
最佳答案
最简单的做法是向背景添加一个在 Y 方向上重复的图像。
background-image:url(images/background.gif);
background-repeat:repeat-y;
这样可以完成工作，但必须有更好的方法!
关于css - 带有全长菜单导航的静态页眉和页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23307627/