我试图负面定位一个DIV元素(在例子中是#content),但我的问题是div的容器(#wrapper2),得到太多的高度(实际上是#content给出的高度,但就像我’移动内容,我想相应地减少#wrapper2的高度.
在这里,我举一个例子来展示我想要实现的目标.如果您尝试该样本,您将看到该页脚距离容器太远.我可以在这里做一个肮脏的黑客并使页脚顶部：-200px但是然后窗口的滚动条越过页脚.
<!DOCTYPE html>
<html>
<head>
<title>Relative positioning demo</title>
<style>
/* RESET STUFF */
html {
margin:0;
padding:0;
border:0;
}
body,div,p,h1 {
margin: 0;
padding: 0;
border: 0;
}
/* END RESET */
h1 {
background-color: yellow;
}
p {
margin-bottom: 1em;
}
/* LAYOUT */
#wrapper1 {
text-align: center;
height: 250px;
background-color: lightgray;
}
#wrapper2 {
background-color: lightblue;
}
#content {
width: 950px;
margin: 0 auto;
background-color: white;
padding: 5px;
height: 560px;
/* HERE's my problem */
position: relative;
top: -200px;
}
#footer {
background-color: black;
color: white;
height: 40px;
line-height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div id="wrapper1">
<h1>This is my heading</h1>
</div>
<div id="wrapper2">
<div id="content">
My content here
</div>
</div>
<div id="footer">
lorem ipsum
</div>
</body>
</html>
如果您有任何建议,请记住,我必须同时看到两个,浅灰色和浅蓝色背景(它们是我网站上的图像),所以margin-top：-200px不是一个选项(就像我在相关问题中建议的那样) ‘搜索过)
谢谢！
