Фиксированная высота и высота 100% в контейнере DIV - PullRequest
Новая
       11

Фиксированная высота и высота 100% в контейнере DIV

1 голос
/ 08 февраля 2010

Я пытаюсь заставить div расширяться до 100% высоты, при этом нижняя часть полосы прокрутки все еще видна, когда она также содержится с div фиксированной высоты. Может кто-нибудь, пожалуйста, помогите мне :)

При использовании нижнего макета вертикальная полоса прокрутки в нижней части .div2 падает с высоты точки обзора, я предполагаю, потому что .div1 имеет высоту 200px, выдвигая div1 до 100% высоты + 200px.

Есть ли способ, которым я могу иметь .div1 быть фиксированной высотой, и .div2 расширять, чтобы заполнить оставшуюся высоту окна и переполнение при достижении этой высоты.

Вот CSS 

html, body {
        height: 100%;
    }
    body {
        margin: 0;
        padding: 0;
        overflow:hidden;
    } 
    .container
    {
        height:100%;
    }
    .leftContent { 
        left:0; 
        top:0; 
        padding:0; 
        width:250px; 
        height:100%; 
        color:white;
        background:blue;
        overflow:hidden;
        border:blue solid;
    } 
    .div1
    {
        height:200px;
        background-color:black;
        border: red solid;
    }
    .div2
    {
        overflow:scroll;
        height:100%;
        border:yellow solid;
    }

А вот и HTML. 

<div id="container" class="container">
    <!-- Start Left Column-->
    <div id="leftColumn" class="leftContent">
        <div id="div1" class="div1">
            CONTENT 
        </div>
        <div id="div2" class="div2">
            START START START START START START START START START START START START START START START START 
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT CONTENT
            END END END END END END END END END END END END END END END END END END END END END END END END 
        </div>
    </div> 
    <!-- End Left Column-->
</div>

Очень ценится. Спасибо

Ответы [ 2 ]

4 голосов
/ 08 февраля 2010

Попробуйте эту настройку для .div2 

.div2 {
    overflow:scroll;
    position: absolute;
    top: 200px;
    left: 0;
    bottom: 0;
    width: 250px;
    border:yellow solid;
}

таким образом вы размещаете .div2 прямо под .div1 с абсолютным позиционированием и расширяете его ширину и высоту так, как вы хотите (до ширины и высоты контейнера)

редактировать

Ошибка IE может быть исправлена ​​путем переноса .div2 в другой div -> <div><div class="div2"></div></div>

также попробуйте добавить этот CSS в вашу .leftContent декларацию 

.leftContent {
    /* other declarations */
    position: relative;
    overflow: hidden;
}
0 голосов
/ 01 декабря 2011

Обновить следующее css 

.leftContent { 
    left:0; 
    top:0; 
    padding:0; 
    width:250px; 
    height:100%; 
    color:white;
    background:blue;
    overflow:hidden;
    border:blue solid;
    position:relative;
} 
.div1
{
    height:200px;
    background-color:black;
    border: red solid;
    border-width:2px;
}
.div2
{
    border-width:2px;
    position:absolute;
    top:204px;
    bottom:2px;
    overflow-y:scroll;
    right:0px;
    border:yellow solid;
}

Сделал левый контент относительным, чтобы он стал позиционированным элементом и теперь является содержащим блоком для двух элементов div. Это важно, чтобы позволить div2 заполнить оставшееся пространство.

Установите border-width явно, чтобы я знал, где расположить div2 , чтобы не перекрывать границу div1.

В основном используется абсолютное позиционирование, чтобы получить div2 для заполнения оставшегося пространства в leftContent вместе с явным указанием позиционирования. Если бы я использовал overflow, я бы получил полосу прокрутки внизу, которая не прокручивалась, поэтому, чтобы избавиться от нее, я использовал overflow-y.

...