Абсолютное позиционирование по отношению к родителю

0

Мое предположение заключалось в использовании абсолютного позиционирования, что оно относилось к родительскому div. Однако этот jsfiddle, похоже, не мешает этому. То, что я пытаюсь сделать, - это трехстрочный жидкостной макет с минимальной высотой, установленной в центральном ряду. Верх и низ имеют фиксированную высоту. К сожалению, я кодирую только IE7 и не имею возможности использовать min-height в моем CSS. Однако при использовании JQuery центр уменьшает размер, нижний колонтитул не перемещается относительно родителя. Информация и jsfiddle ниже.

Браузер: IE7

Стиль: CSS

HTML: 4.0 Строгий

JQuery: 1.10.1

jsfiddle

скрипка после добавления позиции: относительная и высота 100% для обертки jsfiddle

HTML

<div id="wrapper">
    <div id="top"></div>
    <div id="center"></div>
    <div id="bottom"></div>
</div>

CSS

html, body{
    width:100%;
    height:100%;
}
#wrapper{
    background-color:blue;
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
    min-width:700px;
}
#top{
    position:absolute;
    top:0px;
    width:100%;
    height:100px;
    min-width:700px;
    background-color:green;
}
#center{
    position:absolute;
    top:100px;
    bottom:20px;
    min-width:700px;
    width:100%;
    background-color:yellow;
}
#bottom{
    position:absolute;
    bottom:0px;
    min-width:700px;
    width:100%;
    height:20px;
    background-color:purple;
}

JQuery

var resizeTimer = false;
        function doResize() {
            if ($("body").height() == 500) {
                //do nothing
            }
            else if ($("body").height() < 500) {
                $("#wrapper").height(500);
                $("#center").height(380);

            }
            else {
                $("#wrapper").height("auto");
                $("#center").height("auto");
            }
            resizeTimer = false;
        }

        $(window).on("resize", function () {
            if (resizeTimer) {
                clearTimeout(resizeTimer);
            }
            resizeTimer = setTimeout(doResize, 300);
        });
Теги:
height
absolute

2 ответа

1
Лучший ответ

Абсолютное позиционирование является относительным ближайшим родителем (вверх по родительской цепочке), на котором установлено положение (например, position: relative или position: absolute). Если ни один из родителей в родительской цепочке не имеет позиционирования, то абсолютное позиционирование относится к границам документа.

Если вы хотите, чтобы position: absolute относилось к родительскому, заданное position: relative родителя. Это не изменит положение родителя, но будет определять расположение дочерних элементов относительно родителя, а не относиться к некоторому родительскому или документу более высокого уровня.

  • 0
    это вызывает и странно исчезающий акт для моих дивов при изменении размера. Смотрите новый jsfiddle.
  • 0
    Сотрите это. Требуется 100% в jquery, в отличие от авто. Смотрите js fiddle на jsfiddle.net/wQAmA/1 . Вы получаете согласие, так как вы были первыми. Спасибо!
Показать ещё 1 комментарий
1

Позиция не относится к родительскому объекту, по сравнению с ближайшим родителем, у которого есть позиционирование (или документ, если у родителя нет позиционирования).

Добавить position:relative CSS для родительского элемента, чтобы сделать его позиционированием без фактического перемещения его в любом месте.

  • 0
    Это вызывает странное исчезновение акта моего размера при изменении размера. увидеть новый jsfiddle
  • 0
    Сотрите это. Требуется 100% в jquery, в отличие от авто. Смотрите js fiddle на jsfiddle.net/wQAmA/1 .

Ещё вопросы

Сообщество Overcoder
Наверх
Меню