mTo*_*res 6 css height css-position
我试图负面定位一个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不是一个选项(就像我在相关问题中建议的那样) '搜索过)
谢谢!
Jos*_*kle 11
将top属性更改为margin-top
position: relative;
top: -200px;
变成
margin-top: -200px;
为了以后的参考，我最终所做的是将wrapper1和wrapper 2上的图像合并在同一个图像中（它们是背景图案），所以我现在只有一个wrapper，并且不需要相对定位第二个内容上方的内容，它只是跟随页面流。
最后我明白了，如果不使用某种 JavaScript，你就无法删除不需要的高度。
| 归档时间： |
|
| 查看次数： |
18971 次 |
| 最近记录： |