我正在尝试创建下面显示的布局，而不使用表格或 Javascript：
- 页面顶部的固定标题（固定高度）
- 左侧的菜单（固定宽度）
- 右边的内容
- 底部的固定页脚（固定高度）
______________________________________
| 顶部固定头 |
|____________________________________|
--------------------------------------
| | |
| 菜单 | |
| | |
| | |
| | 内容 |
| | |
| | |
| | |
| | |
| | |
|______|______________________________|
______________________________________
| 底部固定页脚 |
|____________________________________|
<!DOCTYPE html>
<html>
<head>
<title>CSS test</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="header">
HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER HEADER
</div>
<div id="container">
<div id="menu">
<br>START OF MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
MENU MENU MENU<br>
END OF MENU<br>
</div>
<div id="content">
<div id="banner">BANNER<br><hr></div>
START OF CONTENT lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem <a id="anchor1" href="#anchor2">go to anchor2</a> ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <a id="anchor2" href="#anchor3">go to anchor3</a> lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum <a id="anchor3" href="#anchor1">go to anchor1</a> lorem ipsum lorem ipsum lorem ipsum END OF CONTENT
</div>
</div>
<div id="footer">
FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER FOOTER
</div>
</body>
</html>
这是“style.css”的源代码：
#header {
position: fixed;
overflow: hidden;
top: 0; left: 0;
width: 100%;
text-align: center;
padding-top: 5px;
padding-bottom: 5px;
z-index: 2;
border: 1px solid black;
background-color: #F0F0FF;
}
#container {
border-width: 5px;
border-style: solid;
border-color: blue;
margin-top: 50px;
border-radius: 3em;
}
#menu {
width: 140px;
height: 100%;
border: 3px green solid;
background: #EEE;
float: left;
position: relative;
}
#banner {
text-align: center;
}
#content {
position: relative;
padding: 10px 20px;
border: 3px red solid;
margin-left: 150px;
overflow: hidden;
background: #EADADA;
}
#footer {
position: fixed;
bottom: 0px;
overflow: hidden;
padding-left: 0px;
margin-left: -7px;
margin-right: -7px;
margin-top: 20px;
text-align: center;
font-size: 8pt;
background: #FEF;
border-top-style: solid;
border-top-color: black;
border-top-width: 1px;
width: 100%;
}
内容长度因页面而异，如有必要，应激活右侧的垂直滚动条。菜单和内容必须一起滚动（只要滚动条可见）。
菜单和内容由单个边框包围。
菜单的背景应覆盖整个高度：如果内容高度大于菜单高度，则菜单区域应垂直扩展，以便使用定义的背景颜色对其进行着色。
我正在尝试解决 2 个问题：
- 当我单击页面上的锚点（单击“转到 anchor1”）时，锚点出现在固定标题下方。有必要向下滚动一点以使文本出现。你如何避免这种情况？
- 我希望菜单区域的整个高度完全用#menu 中定义的背景颜色绘制，而不仅仅是有一些文本的部分。你知道如何实现吗？
回复@VLTII 的评论：
关于您的链接：
- 方法B：它解决了我的第一个问题，但我不喜欢使我的内容难看的所需“显示：块”。我尝试使用“显示：内联块”，但它不再起作用了。
- 方法 C、D 和 E：它们都解决了我的第一个问题。
我用 Firefox、Chrome 和 Opera 测试了所有方法。
在 Firefox 中，当我单击内容中的链接时，它会在链接顶部上方绘制一个灰色框。Chrome 或 Opera 中的链接周围没有灰框。但这是一个非常小的美容问题，我可以忍受。
在方法 E 中，我将“ padding: 15px”更改为“ padding-top: 15px”。