Установка высоты div, соответствующей высоте экрана, с помощью jquery - PullRequest
Новая
       4

Установка высоты div, соответствующей высоте экрана, с помощью jquery

0 голосов
/ 16 сентября 2011

Мне сказали использовать JS для решения моей проблемы:

Моя проблема в том, что у меня есть содержимое 2 divs и боковая панель с высотой, установленной на 100%, нижний колонтитул расположен ниже.

Моя проблема заключается в том, что на моем ноутбуке я хотел бы, чтобы страница отображалась без прокрутки и на полной странице3, если имеется больше данных, то странице потребуется прокрутка.

Как настроитьвысота div определяется разрешением моего экрана?

1 Ответ

0 голосов
/ 16 сентября 2011

Вы можете сделать это в чистом HTML / CSS - JavaScript не требуется.

Вам нужен кросс-браузерный липкий нижний колонтитул .

Следующая информация является производной от http://www.cssstickyfooter.com/:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html, body {
                height: 100%;
                padding: 0;
            }

            #wrap {
                min-height: 100%;
            }

            #main {
                overflow:auto;
                padding-bottom: 150px; /* must be same height as the footer */
            }

            #footer {
                position: relative;
                margin-top: -150px; /* negative value of footer height */
                height: 150px;
                clear:both;
            } 

            /*Opera Fix*/
            body:before {
                content:"";
                height:100%;
                float:left;
                width:0;
                margin-top:-32767px;/
            }
        </style>
        <!--[if !IE 7]>
        <style type="text/css">
            #wrap {display:table;height:100%}
        </style>
        <![endif]-->
    </head>
    <body>
        <div id="wrap">
            <div id="main">
                <div id="content">
                    <!-- Main content here -->
                </div>
            </div>
        </div>
        <div id="footer">
            <!-- Footer content here -->
        </div>
    </body>
</html>

Рабочий пример можно посмотреть здесь: http://jsfiddle.net/dZDUR/

Измените размер правой панели «Результат», чтобы она была короче / выше текста, чтобы полоса прокрутки появлялась / исчезала.

В соответствии с инструкциями CSS Sticky Footer , вы можете вставить свой обычный макет 'column' внутри main div.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...