Абсолютно позиционированный div внутри относительного div не хочет расширяться с помощью большего количества контента

Question

У меня есть #content div и #box_left и #box_right внутри него.Родительский div расположен относительно, но оба внутренних div расположены абсолютно.Проблема в том, что #box_right не хочет увеличивать свою высоту, когда внутри больше контента.Я хотел также, чтобы эти внутренние div делали static и float для установки их рядом, но содержимое исчезало тогда, хотя я и установил ясно: оба в #footer div.Еще одна небольшая проблема: знаете ли вы, почему ссылки меню растягиваются и последняя ссылка переходит на вторую строку, когда страница масштабируется по разрешению экрана?

Вот ссылка на мой сайт: НАЖМИТЕ ЗДЕСЬ

Буду признателен за любую помощь!Спасибо заранее

Answer 1

если содержимое ящика, которое не будет расширяться, будет плавающим, вам потребуется дополнительный div после них:

<div id="content">
    <div id="box_right" style="margin-left:200px;"></div>
    <div id="box_left" style="float: left; width: 200px;"></div>
    <div style="clear:both;"></div>
</div>

Answer 2

Использование плавающего макета Если у вас нет веской причины использовать абсолюты, вы просто создаете свои собственные проблемы.

UPDATE: Элемент с абсолютным позиционированием вынимается из потока документа. Очистить не будет никакого эффекта. Очистка влияет только на плавающие элементы, что вы, вероятно, должны использовать. Или посмотрите на flexbox, который потрясающий, но имеет свои сложности.

решена, по-Flexbox

Answer 3

Избавьтесь от "высоты: 100%" в #box_right и #content - они вам не помогут.

Вместо этого установите минимальную высоту в #content div, чтобы она была немного больше, чем в #box_right div, и вы должны смеяться. После удаления высоты 100% я установил минимальную высоту #content равной 1000 пикселей (все с использованием инспектора в Chrome), и она правильно отображается.

Я также быстро взглянул на ваш javascript - вы должны хранить все ваши селекторы jQuery как переменные, а не перепрашивать их - это будет намного быстрее. Так что ваш обработчик document.ready должен быть написан так:

$(function () {
    var $content = $("#content");
    var $footer = $("#footer");

    $content.hide();
    // etc

    $("a", $footer).click(function () {
        $footer.animate({ marginTop: "none" }, 1000);
        // etc
    });

    // etc
});

Надеюсь, это поможет.

Answer 4

Лично я пытаюсь использовать абсолютное позиционирование на некоторых «главных объектах».Используйте «очистить: оба; положение: относительное; число с плавающей запятой: слева;« в первом диве строки макета »положение: относительное; число с плавающей запятой; слева;»для остальных из них выровняться красиво слева направо.используйте «display: block;»на дочерний элемент, чтобы «подогнать» размеры объекта к содержимому внутри него.

Хороший учебник по позиционированию объекта: div box