Question

我正在尝试创建下面显示的布局，而不使用表格或Javascript ：

页面顶部的固定标题（固定高度）
左侧菜单（固定宽度）
右边的内容
底部固定的页脚（固定高度）

    ______________________________________
    |        FIXED HEADER ON TOP         |
    |____________________________________|
    --------------------------------------
    |      |                             |
    | MENU |                             |
    |      |                             |
    |      |                             |
    |      |     CONTENT                 |
    |      |                             |
    |      |                             |
    |      |                             |
    |      |                             |
    |      |                             |
    |______|_____________________________|
    ______________________________________
    |        FIXED FOOTER AT BOTTOM      |
    |____________________________________|

<!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：它解决了我的第一个问题，但我不喜欢所需的“display：block”让我的内容变得丑陋。我试过“display：inline-block”，但它不再起作用了。
方法C，D和E：它们都解决了我的第一个问题。

我用Firefox，Chrome和Opera测试了所有方法使用Firefox，当我单击内容中的链接时，它会绘制一个灰色框，远远高于链接顶部。 Chrome或Opera中的链接周围没有灰框。但这是一个非常小的化妆品问题，我可以忍受这一点在方法E中，我将“padding: 15px”更改为“padding-top: 15px”。

Answer 1

对于＃1，请查看此处：http://nicolasgallagher.com/jump-links-and-viewport-positioning/demo/

对于＃2，标准方法是在#container上设置背景图像，该图像具有＃menu和#content的背景颜色。如果它是两种纯色，你可以将其设置为单个像素高，以保持文件大小不变。

具有固定标题和固定页脚的浮动布局的背景颜色和滚动问题

1 个答案: