常见的重叠问题，但通常的答案似乎并不工作

好吧，我完全知道这个问题已经在几个网站上多次提出过，我已经完成了我的研究并尝试了所有人提供的解决方案，但我显然错过了某些东西因为他们没有帮助。我相对较新的HTML和CSS，所以也许它简单，我忽略了。常见的重叠问题，但通常的答案似乎并不工作

继承人我的问题。我有头和一个容器divs，然后是一个页脚div，我希望页脚div仍然坚持到窗口的底部，但是当窗口调整大小时，我不希望它重叠容器div。

我可以得到页脚div粘到浏览器的底部没有明显的绝对位置和底部0 CSS的问题，但很明显，然后导致与容器div的重叠问题，所以我做了我的研究，并有尝试在body标签中添加一个相对位置，然后将页脚div移动到容器div的底部，而不是窗口的底部。我创建了我的问题在这里的小型模拟：

首先不会对身体的相对位置：

http://www.klstuff.com/test1

然后用相对位置上的身体：

http://www.klstuff.com/test2

基本上我想要框2粘到窗口的底部，但是当窗口被调整大小时，我不希望它重叠框1.我也尝试在框体中添加最小高度和高度100％属性d容器标签，但似乎根本没有做任何事情。这里是test2的代码（与相对位置属性作为我认为这是稍微更接近于正确的。）

<?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; 
}

来源

2012-08-02 DavidT

尝试“粘脚”技巧 - http://ryanfait.com/sticky-footer/ – jpea 2012-08-02 15:17:10

嗬终于这样做！花了我一会儿。

确定第一件事情，首先做一个包含两个框的div。将身体的高度设置为100％，然后为容器设置100％的最小高度。将容器位置设置为绝对，宽度为100％。

然后，为您的页脚设置一个高度，并将相同值的页边距设置为您的主要内容（即框1）。按代码：

HTML：

<div id="container"> 
    <div id="Box1"> 
     <p>BOX 1</p> 
    </div> 

    <div id="Box2"> 
     <p>BOX 2</p> 
    </div> 
</div>

CSS：

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

希望这有助于。这个对我有用。

来源

2012-08-02 17:20:17 Mackey18

是的这个作品，唯一的问题是不得不删除填充，否则一点会重叠。但对于这些基本网站来说，这没什么。然而，它仍然不会完全为网站即时工作，但我认为它是因为这个确切的填充问题，我现在要通过工作。我注意到在发布的网站上使用inspect元素时，他们中的很多人都有一个围绕整个网站的“包装”类型div，我从未真正看到这些点，因为我认为身体标记已经这样做了，但我猜它没有这就是为什么这么多人拥有它。非常感谢你的努力麦基:) – DavidT 2012-08-02 17:55:36

哈诺我所做的一切都忘记了在页脚上方div的边缘底部:)再次感谢麦基你的解决方案似乎工作精彩 – DavidT 2012-08-02 18:04:41

没问题，我很高兴你最终得到它。只需点击绿色的勾号将其标记为可接受的解决方案。谢谢！ – Mackey18 2012-08-02 18:17:40

常见的重叠问题，但通常的答案似乎并不工作

回答

相关问题