Как расширить div, чтобы покрыть оставшуюся высоту страницы - PullRequest
Новая
       0

Как расширить div, чтобы покрыть оставшуюся высоту страницы

1 голос
/ 19 февраля 2011

Извините, поиск дал множество результатов, но ничего, что точно соответствует моей проблеме.Похоже, что SO тонет в проблемах с div-высотой.: - (

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

<!DOCTYPE html>
<html>
<head>
    <title>Div Test</title>
    <style type="text/css" media="screen">
        body {
            margin:0;
        }
        div {
            width:100%;
        }
        .content {
            position:relative;
            float:none;
            margin-left:auto;
            margin-right:auto;
            display:block;
            width:680px;
        }
        #one {
            height:100px;
            position:relative;
            background-color:#0000FF;
        }
        #two {
            position:relative;
            background-color:#00FF00;
            height:100%;
            min-height:400px;
        }
        #three {
            height:70px;
            background-color:#FF0000;
            bottom:0;
            position:absolute;
        }
        #oneone {
            height:100%;
            background-color:#838383;
        }
        #twotwo {
            height:400px;
            background-color:#EEFF47;
        }
        #threethree {
            height:100%;
            background-color:#400080;
        }
    </style>
</head>
<body>
    <div id="one">
        <div class="content" id="oneone"></div>
    </div>
    <div id="two">
        <div class="content" id="twotwo">Expand this to the bottom.</div>
    </div>
    <div id="three">
        <div class="content" id="threethree"></div>
    </div>
</body>
</html>

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

Возможно ли это без JavaScript? Если да, то каково решение CSS для этого? Спасибо!

Ответы [ 3 ]

1 голос
/ 19 февраля 2011

Для этого необходим Javascript.Если у вас есть верхний колонтитул и высота нижнего колонтитула, а середина должна иметь высоту 100%, результатом будет полная высота страницы + высота верхнего колонтитула + высота нижнего колонтитула.Таким образом, вы получите полосы прокрутки для просмотра всей страницы.Если вы хотите, чтобы все помещалось в одном и том же окне, вам нужно использовать javascript, чтобы определить, сколько осталось среднего пространства, и соответственно назначить высоту.

Чтобы определить среднюю высоту с помощью jQuery, вы можете сделать 

var one = $('#one').height(),
three = $('#three').height(),
two = parseInt($(window).height() - three - one);
alert(two);

Это даст вам высоту, оставленную для средней части, которая составляет <div id="two"> в вашем случае.

См. Код jQuery в действии по адресу http://jsfiddle.net/Ppw5y/. Обратите внимание, что при расширении окна и повторном запуске кода у вас будет другая высота содержимого.

0 голосов
/ 19 февраля 2011

Я думаю, что это можно сделать без сценария. Проверьте этот код. 

<!DOCTYPE html>
<html>
<head>
<title>Div Test</title>
<style type="text/css" media="screen">
    body {
        margin:0;
    }
    div {
        width:100%;
    }
    .content {
        position:relative;
        float:none;
        margin-left:auto;
        margin-right:auto;
        display:block;
        width:680px;
    }
    #one {
        height:100px;
        position:relative;
        background-color:#0000FF;
    }
    #two {
        position:relative;
        background-color:#00FF00;
        /*changed*/
        min-height:400px;
    }
    #three {
        height:70px;
        background-color:#FF0000;
        bottom:0;
        position:relative; /*changed*/
    }
    #oneone {
        height:100%;
        background-color:#838383;
    }
    #twotwo {
        /*changed*/
        min-height:400px;/*changed*/
        background-color:#EEFF47;
    }
    #threethree {
        height:100%;
        background-color:#400080;
    }
</style>
</head>
<body>
<div id="one">
    <div class="content" id="oneone"></div>
</div>
<div id="two">
    <div class="content" id="twotwo">Expand this to the bottom.</div>
</div>
<div id="three">
    <div class="content" id="threethree"></div>
</div>    
</body>
</html>

Я добавил / * изменен * / везде, где я изменил ваш код.

0 голосов
/ 19 февраля 2011

Как насчет установки высоты: авто; для #two и #twotwo?

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

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

...