CSS относительное позиционирование с отрицательным значением и высотой - PullRequest
Новая
       16

CSS относительное позиционирование с отрицательным значением и высотой

6 голосов
/ 25 октября 2011

Я пытаюсь установить отрицательное положение элемента 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 не вариант (как кто-то предложил в связанных вопросах, которые я искал)

Спасибо!

Ответы [ 2 ]

11 голосов
/ 25 октября 2011

Измените свойство top на margin-top

Демо 

        position: relative;
        top: -200px;

изменено на 

        margin-top: -200px;
0 голосов
/ 26 октября 2011

Что касается будущих ссылок, то, что я наконец-то сделал, это объединил изображения на wrapper1 и wrapper 2 в одно и то же изображение (это были фоновые рисунки), поэтому у меня сейчас только одна оболочка, и мне не нужно относительное положение содержимого над вторым, оно просто следует за потоком страниц.

В конце концов, я понял, что вы не можете удалить нежелательную высоту, не используя какой-то Javascript.

...