Html 常见的重叠问题,但通常的答案似乎不起作用
好了,伙计们,我完全知道这个问题已经在几个网站上被问了好几次,我已经做了研究,尝试了人们给出的所有解决方案,但我显然遗漏了一些东西,因为他们没有帮助我。我对HTML和CSS比较陌生,所以我可能忽略了一些简单的东西 这是我的问题。我有页眉和一个容器div,然后是页脚div,我希望页脚div保持在窗口底部,但当窗口调整大小时,我不希望它与容器div重叠 我可以让页脚div粘到浏览器的底部,这与明显的绝对位置和底部0 CSS没有问题,但显然这会导致容器div的重叠问题,因此,我做了研究,并尝试向body标记添加一个相对位置,然后将footer div移动到container div的底部,而不是窗口的底部。我在这里创建了一个问题的小型模拟: 首先,没有身体上的相对位置: 然后根据身体上的相对位置: 基本上,我希望框2粘贴到窗口底部,但当窗口调整大小时,我不希望它与框1重叠。我也尝试过在body和container标签中添加minheight和height 100%属性,但这似乎没有任何作用。下面是test2的代码(带有相对位置属性,因为我认为它稍微接近正确的位置)Html 常见的重叠问题,但通常的答案似乎不起作用,html,css,Html,Css,好了,伙计们,我完全知道这个问题已经在几个网站上被问了好几次,我已经做了研究,尝试了人们给出的所有解决方案,但我显然遗漏了一些东西,因为他们没有帮助我。我对HTML和CSS比较陌生,所以我可能忽略了一些简单的东西 这是我的问题。我有页眉和一个容器div,然后是页脚div,我希望页脚div保持在窗口底部,但当窗口调整大小时,我不希望它与容器div重叠 我可以让页脚div粘到浏览器的底部,这与明显的绝对位置和底部0 CSS没有问题,但显然这会导致容器div的重叠问题,因此,我做了研究,并尝试向bod
HTML/CSS测试站点
方框1
方框2
身体{
身高:100%;
位置:相对位置;
}
#框1{
宽度:980px;
背景颜色:蓝色;
颜色:#fff;
保证金:自动;
文本对齐:居中;
填充底部:150px;
填充底部:150px;
利润上限:200px;
}
#框2{
宽度:100%;
背景色:红色;
文本对齐:居中;
填充底部:50px;
填充底部:50px;
位置:绝对位置;
底部:0;
左:0;
}
瓦胡终于做到了!花了我一段时间
首先,在两个框周围创建一个包含div。将主体高度设置为100%,然后将容器的最小高度设置为100%。将容器位置设置为绝对,宽度设置为100%
然后,为页脚设置一个高度,并为主要内容(即框1)设置相同值的底部边距。根据守则:
HTML:
希望这有帮助。这对我来说很有效。试试“粘脚”的把戏-是的,这很有效,唯一的问题是必须删除填充,否则会有一点重叠。但对于这些基本站点来说,这是可以的。然而,它仍然不能完全为我实际工作的网站工作,但我认为这是因为这个确切的填充问题,我现在要解决这个问题。我注意到在发布的站点上使用inspect元素时,很多站点都有一个“包装器”类型的div,它包围了整个站点,我从来没有真正看到过这些的意义,因为我认为body标签已经做到了,但我想它没有,这就是为什么这么多人都有它。非常感谢你的努力Mackey:)哈不,我所做的只是忘记在页脚上方的div上加上页边空白:)再次感谢Mackey你的解决方案看起来很好没有问题,我很高兴你最终得到了它。只需单击绿色勾号即可将其标记为已接受的解决方案。谢谢
<?xml version="1.0" encoding ="utf-8"?>
<!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" >
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<head>
<title>HTML/CSS Test Site</title>
<meta name="description" content="HTML/CSS testing page.">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<div id="Box1">
<p>BOX 1</p>
</div>
<div id="Box2">
<p>BOX 2</p>
</div>
</body>
</html>
body {
height: 100%;
position: relative;
}
#Box1 {
width: 980px;
background-color: blue;
color: #fff;
margin: auto;
text-align: center;
padding-bottom: 150px;
padding-bottom: 150px;
margin-top: 200px;
}
#Box2 {
width: 100%;
background-color: red;
text-align: center;
padding-bottom: 50px;
padding-bottom: 50px;
position: absolute;
bottom: 0;
left: 0;
}
<div id="container">
<div id="Box1">
<p>BOX 1</p>
</div>
<div id="Box2">
<p>BOX 2</p>
</div>
</div>
body {
height: 100%;
padding: 0px;
margin: 0px;
}
#Box1 {
width: 980px;
background-color: blue;
color: #fff;
margin: auto;
text-align: center;
height: 150px;
margin-bottom: 100px;
margin-top: 200px;
}
#Box2 {
width: 100%;
background-color: red;
text-align: center;
position: absolute;
bottom: 0;
height: 100px;
}
#container {
width: 100%;
min-height: 100%;
position:absolute;
}