Как заставить DIV занимать оставшуюся часть страницы? - PullRequest
Новая
       5

Как заставить DIV занимать оставшуюся часть страницы?

3 голосов
/ 24 июля 2010

У меня есть следующий HTML: 

<html>
<body>
  <h2>Title</h2>
  <div id='large_div'>
    blah.. blah.. blah..
  </div>
</body>
</html>

Как я могу заставить large_div занять остальную часть высоты страницы?

Вот CSS для страницы: 

html { height: 100%; }
body { height: 100%; }
#large_div {
    /* ??? */
}

Ответы [ 4 ]

2 голосов
/ 24 июля 2010

Вы можете попробовать установить отрицательное поле для #large_div, равное высоте h2. К сожалению, это будет не очень надежный код, поскольку высота h2 будет меняться в зависимости от длины текста и браузера: 

#large_div {
    height: 100%;
    margin-top: -1em; /* adjust to height of h2 */
}

Немного jQuery рассортирует вас, хотя: 

$(document).ready(function(){
    $('#large_div').css({height: $(window).height() - $('h2').height()});
});
1 голос
/ 24 июля 2010

Итак, вы в основном хотите макет таблицы?Это одна из самых неприятных вещей в CSS.Возможно, вы захотите вернуться к старомодным таблицам HTML, но если вас не волнует поддержка IE6 / 7 , то вы также можете поиграть, используя display атрибуты table, table-rowи в конечном итоге table-cell.

Вот SSCCE, скопируйте и запустите его. 

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3323454</title>
        <style>
            html { 
                height: 100%;
            }
            body { 
                display: table; 
                margin: 0;
                width: 100%;
                height: 100%;
            }
            #large_div {
                display: table-row; 
                width: 100%;
                height: 100%;
                background: pink;
            }
        </style>
    </head>
    <body>
        <h2>Title</h2>
        <div id="large_div">blah.. blah.. blah..</div>
    </body>
</html>

Опять же, это работает только в приличных браузерах, придерживающихся CSS2.

Если все, чего вы хотите добиться, это дать div хорошую основу, то есть более хорошие решения.

0 голосов
/ 24 июля 2010

Если вы знали высоту верхнего div (или h2 в данном случае), вы можете попробовать что-то вроде следующего: 

#topdiv { height:100px; }
#bottomdiv { height:100%; margin-bottom:-100px; bottom:0; }

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

Возможно, вы сможете найти свое решение - или впо крайней мере, «достаточно хорошее» решение, играя с этими свойствами CSS ...

Удачи!

0 голосов
/ 24 июля 2010 
html,body {height:100%;border:0px;margin:0px;padding:0px;}

#large_div {height:100%;margin:0px;}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...