Дополнительное пространство под нижним колонтитулом

Question

Дополнительное пространство под нижним колонтитулом

0

Я прочитал несколько ответов по этому вопросу, но я не нашел подходящего ответа. Я создал контейнер div и создал 3 отдельных div внутри него и позиционировал их с помощью позиционирования CSS. В нижней части у меня есть колонтитул div, но когда я загрузить страницу в браузере, есть дополнительное пространство под сноской. Я не хочу использовать липкий нижний колонтитул, так как содержимое на моей странице загружается динамически, поэтому высота страницы изменяется динамически.

Я думаю, проблема заключается в том, что браузер добавляет высоту каждого div при разборе страницы и устанавливает эту сумму как высоту документа. Поскольку div является элементом уровня блока, и их поток один под другим в нормальном потоке.

Таким образом, даже если div позиционируется с использованием свойств позиционирования CSS (top, left и etc), Браузер все еще анализирует их в своем обычном потоке, тем самым добавляя их высоту (в верхнем нижнем порядке их вхождения в нормальном потоке) и, таким образом, в результате чего дополнительное пространство ниже нижнего колонтитула, как если бы внутренний div (b, c, d) переполнял нижний колонтитул (что они делают без позиционирования).

Я просто хочу знать, как я могу обучить мой браузер пренебрегать этим дополнительным пространством.

Здесь мой код (см. Также живой пример)

<html>
    <head>

        <style>
            #container{width:1000px;height:600px;border:2px solid black;}
            #b{width:200px;height:500px;border:2px solid blue;}
            #c{width:500px;height:500px;border:2px solid green;position:relative;top:-480px;left:247px;}
            #d{width:200px;height:500px;border:2px solid red;position:relative;top:-1005px;left:797px;}
            #footer{width:1000px;height:200px;border:2px solid red;}
        </style>

    </head>

    <body>

        <div id="container">

            <div id="b"><h2>Division_01</h2></div>
            <div id="c"><h2>Division_02</h2></div>
            <div id="d"><h2>Division_03</h2></div>

        </div>

        <div id="footer"><h2>This is my FOOTER....</h2></div>
    </body>
</html>

Rahul Soni 17 сен. 2013, в 20:15

Источник

Теги:

html

css

3 ответа

Ещё вопросы

Shafeeque · Answer 1 · 2013-09-17T15-14-00.000Z

Я надеюсь, что это сработает

 <style>
        #container{width:1000px;height:600px;border:2px solid black;}
        #b{width:200px;height:500px;border:2px solid blue;}
        #c{width:500px;height:500px;border:2px solid green;position:absolute;top:-480px;left:247px;}
        #d{width:200px;height:500px;border:2px solid red;position:absolute;top:-1005px;left:797px;}
        #footer{width:1000px;height:200px;border:2px solid red;}
    </style>

SlightlyCuban · Answer 2 · 2013-09-17T14-42-00.000Z

Вы используете position: relative а не absolute. Попробуйте #container относительное позиционирование, а затем используйте абсолютное значение для своих детей:

#container {
    width:1000px;
    height:600px;
    border:2px solid black;
    position: relative;
}
#b {
    width:200px;
    height:500px;
    border:2px solid blue;
}
#c {
    width:500px;
    height:500px;
    border:2px solid green;
    position:absolute;
    top: 20px;
    left:247px;
}
#d {
    width:200px;
    height:500px;
    border:2px solid red;
    position:absolute;
    top: 0px;
    right: 0px;
}

Пример: http://jsfiddle.net/YpWSM/5/

Вы были на правильном пути с тем, как браузер вычисляет height когда вы используете position: relative; элементы остаются в их нормальном потоке, а затем перемещаются в смещения.

position: absolute удаляет элементы из нормального потока документов и позиционирует их в соответствии с тем, какой родитель имеет на нем позиционирование (именно поэтому я добавил position: relative с #container).

SpYk3HH · Answer 3 · 2013-09-17T14-32-00.000Z

Попробуйте добавить html, body { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; } html, body { margin: 0; padding: 0; } к вашему CSS

Или, если быть более конкретным:

<style>
    html, body { margin-bottom: 0; padding-bottom: 0; }
    #container{width:1000px;height:600px;border:2px solid black;}
    #b{width:200px;height:500px;border:2px solid blue;}
    #c{width:500px;height:500px;border:2px solid green;position:relative;top:-480px;left:247px;}
    #d{width:200px;height:500px;border:2px solid red;position:relative;top:-1005px;left:797px;}
    #footer{width:1000px;height:200px;border:2px solid red;}
</style>

С тем, что вы дали в виде HTML, да, это так. Это было бы единственной данной проблемой. У тебя должно быть что-то еще, что ты не показываешь.