Как заставить DIV растягиваться до нижней части экрана?

Это, вероятно, не представляется возможным с помощью CSS, но, возможно, я ошибаюсь:Как заставить DIV растягиваться до нижней части экрана?

У меня есть структуру документа, как это:

BODY 
    DIV[A] 
    DIV[B]

DIV [А] position:absolute с фиксированным с и в центре экрана. У него нет настройки высоты.

DIV [B] является position:absolute с top:300px. Это фактическое содержание DIV. Внутри я позиционирую все с позицией: абсолютный. Потому что я люблю положение: абсолютное. Он обеспечивает полный контроль над позиционированием. Нет уродливых головных болей в тексте ... это так приятно.

Хорошо. Но теперь проблема: DIV [B] всегда только height, что я говорю. Теперь, может быть, есть классный трюк CSS, который будет тянуть его всегда вниз, чтобы коснуться нижней части окна просмотра браузера?

источник

2010-10-18 Proud Member

Просто мысль, но не могли бы вы дать 'div' высоту' 100% 'вместо размера пикселя? –

Чтобы установить высоту динамически быть высота окна - DIV [A] s высота, вы должны использовать JavaScript/JQuery и продолжайте называть его SetTimeout.

С другой стороны, если он соответствует вашим требованиям, вы можете установить DIV [B], чтобы быть position:fixed; bottom:0px;

<body onload="setupLayout();" > 
... 


    <script language="javascript" type="text/javascript"> 
    // ACTIVITIES TO RUN FOR THE PAGE 
    function setupLayout() { 
     setInterval('adjustLayout();', 1000); 
    } 

    // ADUST THE MAIN CONTAINER (content panel) LAYOUT 
    function adjustLayout() { 
     try { 
      var divB = $get('divB'); 
      var divAHeight = 20px; 
      divB.style.height = document.body.clientHeight - divAHeight ; 
     } 
     catch (e) { } 
    } 
    </script> 
</body>

источник

2010-10-18 15:00:01 Brad

вместо того, чтобы запускать каждую секунду, возможно, можно было бы называть его 'document.ready' и' window.resize'? – Huey

@ Хьюи, это хорошая идея. В зависимости от содержимого вам может потребоваться также нажать «окно».scroll' и управлять переполнением на 'divB' – Brad

Я полагаю, что DIV [A] - ваш заголовок и DIV [B] ваш основной контент div, и вы хотели бы, чтобы ваш контент div занимал всю страницу, когда в нем не много текста, не так ли?

Если я правильно помню, потому что я могу проверить это на данный момент, вы можете:

html, body 
{ 
height:100%; 
} 

DIV[B] 
{ 
height:100%; 
}

Я думаю, что следует сделать трюк.

Edit: Вот хороший пример, который может помочь вам: http://www.xs4all.nl/~peterned/examples/csslayout1.html

источник

2010-10-18 14:59:59 ALOToverflow

Высота 100% учитывается только при отображении экрана. Любое изменение размера окна приведет к нежелательному отображению вашего макета. – Brad

Итак, вы в основном говорите, что вам следует продолжать использовать функцию javascript для изменения размера окна просмотра – ALOToverflow

. Да, это единственный способ, чтобы div ** всегда ** был точным размером, оставшимся в окне. – Brad

Если вы хотите ДИВ быть позиция: абсолютная, она должна быть в position: relative контейнере.

<div style="position: relative"> 
    <div style="position: absolute; top: 300px"> 
    <h3>Content Header</h3> 
    <!-- Content --> 
    </div> 
</div>

Так относительно вашей проблемы с DIV [B], вы можете смешивать между <table> с и <div> с.

источник

2010-10-18 15:03:31 Arrabi

Что вы подразумеваете, смешивая между s и s? –

извините, между таблицами и divs – Arrabi

#div_to_touch_the_bottom { 
    position:fixed; 
    bottom:0; 
    top:0; 
    left:25%; 
    right:25%; 
}

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

источник

2010-10-18 15:26:24 Mike

Как заставить DIV растягиваться до нижней части экрана?

ответ

Смежные вопросы