与页眉和页脚div重叠的中间内容
是网页布局中常见的问题。当页眉和页脚div设置了固定的高度或定位属性时，中间内容可能会被覆盖或重叠。为了解决这个问题，可以采取以下几种方法：
- 使用CSS的margin属性：通过设置中间内容div的margin-top和margin-bottom属性，将其与页眉和页脚div保持一定的间距，避免重叠。
- 使用CSS的padding属性：通过设置页眉和页脚div的padding-top和padding-bottom属性，为中间内容div留出一定的空间，避免重叠。
- 使用CSS的position属性：将页眉和页脚div设置为position:fixed或position:absolute，然后设置它们的top和bottom属性，使其固定在页面的顶部和底部。这样中间内容div就不会被它们覆盖。
- 使用CSS的flexbox布局：将页面的整体布局设置为flexbox布局，通过设置页眉和页脚div的flex属性，使它们占据固定的空间，中间内容div则会自动填充剩余空间，避免重叠。
- 使用CSS的grid布局：将页面的整体布局设置为grid布局，通过设置页眉和页脚div的grid-row属性，使它们占据固定的行，中间内容div则会自动填充剩余行，避免重叠。
以上是常见的解决方法，具体选择哪种方法取决于具体的页面需求和布局结构。腾讯云提供的相关产品和服务中，与解决页面布局问题直接相关的可能是腾讯云的云服务器（CVM）和云存储（COS）服务。您可以通过以下链接了解更多关于腾讯云的产品和服务：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云存储（COS）：https://cloud.tencent.com/product/cos
相关·内容
2回答
..and如何将父/弹性框放在标题下面？如果标题改变了高度，向下按下下面的父项？
我使用位置固定，因为我不能得到flexbox显示，除非我设置位置固定或绝对，但我正在使网站响应，所以我不能放置绝对位置。
HTML
<div id="header"></div>
<div class="parent">
<div id="child1-aside"></div>
<div id=&
浏览 0提问于2017-07-01得票数 0
在我的html中，页眉和页脚是固定的，但正文内容与页眉和页脚重叠。我希望在页眉和页脚之间显示内容，而不会重叠。怎样才能实现呢？
请在这方面帮助我。我正在使用下面提到的CSS代码。您可以检查它并解决此问题。
<style type="text/css">
@media print {
#header {
display: table-header-group;
position: fixed;
top: 0;
浏览 3提问于2017-12-30得票数 0
有许多固定的页脚/页眉可变宽度的内容帖子，但似乎没有一个适合我的特定用例。
描述我想要的最简单的方式是google文档的风格界面，页眉和页脚是固定的，内容是X/Y滚动的，但当你开始向下滚动时，它是页眉滚动的一部分
HTML, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
div {
padding: 10px;
}
.header {
background: LightCoral;
border: 10px solid IndianRed;
}
.fixed-header {
浏览 14提问于2018-01-27得票数 0
1回答
我正在尝试制作一个包含3个元素的页面:页眉、页脚和内容。顾名思义，我希望页眉贴在顶部，页脚贴在底部，内容贴在两者之间。我已经做了一个布局，它把页眉和页脚放在它们应该在的地方，但是内容要么与它们重叠，要么反过来，内容应该变得更小。
我的问题是页眉和页脚将用于许多不同的事情，因此当涉及到高度时，它们是动态的。
有没有办法让内容填满页眉和页脚之间的空白处，而不重叠它们呢？
如果可能，我会更喜欢纯CSS，但如果这是不可能的，我也想要一个JavaScript的建议。:)
谢谢!
编辑:这是我拿到的自动取款机。
<div class="container">
<d
浏览 3提问于2012-08-22得票数 0
2回答
我试图创建一个页面，这将有未知的高度(或最小高度)和滚动中间内容的页眉和页脚div，如果内容增加，所有这三个应该只适合屏幕。
我在下面试过了，如果页眉和页脚的高度是固定的，如果只有中间的内容增加了，那么我就可以完美地滚动内容div。如何处理页眉和页脚的未知高度部分以使其适合？我给了min-height，但不起作用。
#Pageheader {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
background-color: Blue;
}
#Pagefooter {
position: fixed;
bottom: 0;
浏览 2提问于2014-03-27得票数 1
我希望你一切都好。
我正在React中构建一个页面，它占用了100%的视图高度，并禁用了溢出。当我有一个动画页脚时，我的麻烦来了，用户可以调出压缩内容的动画页脚，以便为自己腾出空间。我已经在下图中描述了这一点。请原谅我的拼写错误....我不称职。
现在，我已经将页眉和页脚分别设置为绝对和固定在页面的顶部和底部，并且我正在尝试使用Flex grow来调整内容，但到目前为止它似乎没有响应。
耽误您时间，实在对不起!
PS
我很确定这个笨蛋回答了我的问题，但是我还没有让任何flex更改生效(效果？)。
浏览 14提问于2019-10-30得票数 0
回答已采纳
当我查看文档时，似乎应该使用Stack element来布局我的应用程序。 我想要一个基本的布局与页眉，页脚和主要部分。页眉和页脚应该有固定的高度。主要部分必须在高度上增长/缩小。所有窗口都必须有100%的窗口宽度。 我在Stack.Item上看到了grow道具。我假设我只需要将grow设置为main部分。 问题是我不能让Stack占据整个窗口的高度。它根据它的子对象设置它的大小。 我想我有两个可能的解决方案： 1)根据窗口高度设置Stack的高度。还要将其高度设置为状态，以便在窗口高度更改时更改Stack高度。 2)直接在CSS/HTML中进行高级布局，例如使用flexbox。仅对截面布局
浏览 20提问于2019-08-06得票数 0
回答已采纳
3回答
我必须在android中做一个简单的布局，但对中心元素的高度有问题。基本上我有一个页眉，一个正文和一个页脚。页眉和页脚有固定的高度，但我希望主体填充剩余的空间。这应该是屏幕大小独立的，所以我希望在渲染布局时动态计算出主体的高度。
你们知道我怎样才能达到这样的效果吗？
谢谢
浏览 0提问于2010-04-18得票数 0
回答已采纳
1回答
我正在尝试将粘性页脚和页眉合并到每个页面上的内容波动的网站上，一些页面只有一段或更少的文本，而一些页面有多个段落。
我希望白色背景的div在页眉和页脚之间填满页面的100%，这样无论页面中有多少内容，或者查看者的分辨率有多大，白色div都将是100%垂直的(减去页眉和页脚)。
我一直在修补这方面的代码：
#middle-cell {
vertical-align:top;
height: 100%
}
这是我目前所拥有的。
但到目前为止，我还没能让它工作。
浏览 10提问于2014-02-07得票数 0
是否可以使用css在html文档的所有页面中打印页眉和页脚，而不重叠页眉和内容。我试过“位置:固定”，但标题与身体内容重叠。当我试图将“top: set”设置为内容正文时，它只应用于第一页。
码样例
<html>
<head>
<style>
div#myheader {
position: fixed; top: 0; left: 0; width: 100%; height: 2em;
padding-bottom: 3em;
margin-bottom: 10px;
浏览 3提问于2017-09-11得票数 2
我试图在CSS中设置一个简单的3行布局。它需要：
一个主容器div (100%宽度，100%高度)，可容纳.
粘头(固定高度为48 of )
中间部分，填充页眉和页脚之间的所有剩余空间。
粘性页脚(初始高度为62 of，但可以在页面加载后通过javascript更改)。
到目前为止，我得到的是：
<body>
<div id="container">
<div id="headContainer">
...
</div&g
浏览 1提问于2013-10-07得票数 3
回答已采纳
我需要组成一个页面，其中有一个页眉和页脚，以及一些文本之间的内容。
页面大小是固定的(一个iframe)，并且有一个固定高度的页脚，但是页眉的内容可以改变(它会被翻译，因此文本行数会变化)。页眉和页脚都不应该有滚动条。如果它们之间的内容很长，则应该向内容本身添加一个滚动条。无论我做什么，我都不能让它只在CSS上工作。我可以滚动到整个页面(或者顶部区域，包括页眉)，或者内容div的文本超出了它的边界。
这里有一个例子来说明我的问题： (我只想要一个绿色区域的卷轴)
哦没有了JavaScript..。:)
谢谢。
浏览 1提问于2013-07-15得票数 0
回答已采纳
1回答
堆叠的div彼此调整大小
、、、、
这可能是一个很长的过程:我正在尝试用Electron，React和Socket.io做一个聊天应用程序(类似于Slack)。我的问题主要是处理React和CSS/Sass。现在我有几个bootstrap，但我并没有真正使用网格系统，所以它可以/可能被废弃。
页面的结构如下:我有一个带有可调整大小的文本区的页脚。在它上面，我有一个div，它将保存消息。该div将overflow-y设置为scroll，这样滚动条只用于消息，而不会占用整个页面的空间。我希望div随着footer随着textarea的增长而变短。但是现在，div只是扩展到页脚(以及滚动条)之下。因为消息填满了div，所以滚动条中没有
浏览 0提问于2016-09-04得票数 2
编辑:使用position:fixed为pageHeader、pageBody和pageFooter (然后纠正他们的位置)为我做了这件事。谢谢你们！
我正在开发一个使用HTML和CSS的Android web应用程序。我现在有这样的情况：
#container {
min-height:100%;
position:relative;
}
#pageHeader {
color:<%=foreColor%>;
}
#pageBody {
padding-bottom:100px;
}
#pageFooter {
position:static;
clear:b
浏览 3提问于2011-08-10得票数 2
回答已采纳
我使用HTML和CSS已经有一段时间了。每次我在CSS中工作时，我都有一种感觉，那就是我“做得不对”。
例如，当在网页上定位不同的div和元素时，我经常使用“位置:绝对”和“位置:相对”。有时，要找到“正确”的位置会非常乏味，结果会产生非常难看的数字，例如：
position: relative;
width: 1300px;
height: -720px;
除此之外，如果我改变了对它们的外观或位置的看法，它也使得以后编辑所述的div和元素变得非常困难。我在YouTube上看过很多教程，人们用“页边距”和“填充”标签来定位他们网站上的元素。
我对此感到非常困惑，因为这些标记应该用于
浏览 1提问于2017-05-29得票数 1
回答已采纳
2回答
我打算有一个流体高度标头，中间内容部分扩展到可用的高度和页脚锚定在底部。就像这样：
<html>
<body>
<header>
<h1>Bacon ipsum dolor sit amet salami</h1>
<h2>ribs tongue cow </h2>
</header>
<article>
<div class="content">content</div>
<div clas
浏览 4提问于2013-12-12得票数 2
回答已采纳
我有一个布局工作在CSS，但我不明白它为什么工作。CSS专家，请了解一下这里发生了什么。
我的目标是有这样的布局：
突出的特点是：
窗口顶部和底部的固定高度页眉和页脚
占据页眉和页脚之间全部空间的内容区域。
内容区域有自己的滚动条(也就是说，它不会将页脚向下推到屏幕底部)。
我使用css和content中的div ( 0%高度)的组合实现了这一点。与我的预期相反，0%的高度差延伸到完全可用的高度。
下面是一个JSFiddle： (它看起来不太正确，因为外部height:100%在jsfiddle容器中没有意义)。
HTML
<div id="ever
浏览 2提问于2013-04-04得票数 0
我有一个标题，它占据了整个屏幕的宽度。在我的页眉中，我想放置3个div，它们应该彼此对齐。div在一边是固定宽度的，中间应该占用其他可用的空间。所以我不知道头部的宽度，也不知道中间容器的宽度。
现在我有这样的代码: html：
<div id="header">
<div id="menu-container">
menu goes here
</div>
<div id="logo-container">
logo goes here
</div>
浏览 7提问于2012-07-27得票数 3
回答已采纳
3回答
我知道有很多相同的主题，但是CSS有没有办法在页脚底部粘贴一个%的高度，而不会因为绝对位置而溢出正文和页眉？
我试着坚持这一点：
html,body{
height: 100%;
}
#header{
background-color: yellow;
height: 100px;
width: 100%;
}
#holder {
min-height: 100%;
position:relative;
}
#body {
padding-bottom: 100px;
}
#footer{
background-color
浏览 1提问于2013-07-11得票数 1
回答已采纳
3回答
我已经做了一个简单的html页面，用一个小的CSS (在CSS中不是很好)来显示页眉和页脚之间的数据，但是当我创建一个带有长数据的表格数据时，它与下面页面上的页脚和页眉重叠。代码如下：
<html>
<head>
<style>
p { page-break-after: always; }
.footer { position: fixed; bottom: 0px; }
.header { position: fixed; top: 0px; }
</style>
</he
浏览 0提问于2017-11-28得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
