Html 固定页眉和固定页脚的浮动布局的背景色和滚动问题_Html_Css_Css Float

Html 固定页眉和固定页脚的浮动布局的背景色和滚动问题

html css

Html 固定页眉和固定页脚的浮动布局的背景色和滚动问题,html,css,css-float,Html,Css,Css Float,我正在尝试创建下面显示的布局，而不使用表或Javascript：页面顶部的固定页眉（固定高度）左侧的菜单（固定宽度）右边的内容底部的固定页脚（固定高度）内容长度因页面而异，如有必要，应激活右侧的垂直滚动条。菜单和内容必须一起滚动（只要滚动条可见）。菜单和内容用一个边框括起来。菜单的背景应覆盖整个高度：如果内容高度大于菜单高度，则菜单区域应垂直扩展，以便使用定义的背景颜色着色我试图解决两个问题：当我单击页面上的锚（单击“转到锚1”）时，锚出现在固定标题下方。需要向下滚动一点以

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

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

内容长度因页面而异，如有必要，应激活右侧的垂直滚动条。菜单和内容必须一起滚动（只要滚动条可见）。
菜单和内容用一个边框括起来。
菜单的背景应覆盖整个高度：如果内容高度大于菜单高度，则菜单区域应垂直扩展，以便使用定义的背景颜色着色

我试图解决两个问题：

当我单击页面上的锚（单击“转到锚1”）时，锚出现在固定标题下方。需要向下滚动一点以显示文本。你如何避免这种情况

我希望菜单区域的整个高度完全用#menu中定义的背景色绘制，而不仅仅是有一些文本的部分。你知道如何做到这一点吗

回复@VLTII的评论：

关于您的链接：

方法B：它解决了我的第一个问题，但我不喜欢要求的“显示：块”，这会让我的内容难看。我尝试了“显示：内联块”，但它不再工作了
方法C、D和E：它们都解决了我的第一个问题

我用Firefox、Chrome和Opera测试了所有方法。
在Firefox中，当我单击内容中的链接时，它会在链接顶部上方绘制一个灰色框架。Chrome或Opera中的链接周围没有灰色边框。但这是一个很小的美容问题，我可以接受。
在方法E中，我将“

填充：15px

”更改为“

填充顶部：15px

”

对于#1，请看这里：

对于#2，标准方法是在#容器上设置一个背景图像，该图像具有#菜单和#内容的背景色。如果是两种纯色，您可以将其设置为一个像素高，以减小文件大小。

您已将问题标记为CSS，但尚未包含CSS。我们可能需要看到这一点来帮助你。例如，你是吗？好吧，我设法在我的问题中加入了CSS代码，最后：-）通过固定页眉和页脚，你的意思是你永远不希望它们滚动离开页面还是它们只有一个设定的高度？页眉和页脚都是“位置：固定的”，所以它们永远不会移动或滚动离开页面。他们也有一个设定的高度，以便更容易设置内容的页边距顶部和页边距底部值。感谢您的链接，它解决了我的第一个问题。我编辑了我的问题，提供了更多关于我在你的链接中描述的不同方法测试的信息。为了不给浏览器带来压力，不要只拍摄一个像素的BG图像，拍摄100x100左右。那会画得更快。 ______________________________________ | 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>

#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%;
}