Относительное позиционирование CSS с отрицательным значением и высотой
Я пытаюсь отрицательно позиционировать элемент DIV (в примере это #content), но моя проблема в том, что контейнер div (# wrapper2) тоже получает много высоты (на самом деле это высота, которую дает #content, но по мере того, как я перемещаю содержимое вверх, я хотел бы соответственно уменьшить высоту # wrapper2).
Здесь я даю вам пример, чтобы показать, что я ' m пытается достичь. Если вы попробуете образец, вы увидите, что нижний колонтитул находится на слишком большом расстоянии от контейнера. Я могу сделать грязный хакер здесь и сделать нижний колонтитул top: -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 не вариант (как кто-то предложил в связанных вопросах, которые я искал)
Спасибо!