Внутренний контейнер переполнения

0

У меня есть два div внутри div. Я хочу, чтобы второй div заполнился до нижней части контейнера. Я пробовал различную height: 100%; , height: inherit; , height: auto; и т.д. и разные значения для свойства display css, но не удалось. Пожалуйста помоги.
Html:

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>

скрипка
Примечание. Второй div имеет несколько строк, а затем нижний колонтитул. Я хочу, чтобы строки были скрыты в соответствии с высотой. Но нижний колонтитул второго div должен быть виден.
Другое примечание:
Контейнер переоценен (с использованием JQuery Re-size). Поэтому я не хочу устанавливать высоту второго div. Это сделает его статичным. Я хочу, чтобы второй div имел динамическую высоту. т.е. постоянно расширяя дно контейнера.

  • 0
    Вы пробовали с overflow:hidden ?
  • 0
    Да. Смотри ответ Ананда.
Теги:

8 ответов

1
Лучший ответ

Как насчет чего-то вроде этого:

HTML:

<div id="con">
    <div id="top">
        <label>Test</label>
    </div>
    <div id="bottom">sdsdfsdfsdfs sdfs dfsdf sdf sd ff</div>
</div>

CSS:

#con {
    height: 200px;
    width: 100px;
    background-color: black;
    border: 3px solid black;
    position: relative;

}
#top {
    background-color: red;
    position: absolute;
    width: 100%;
}
#bottom {
    top: 0px;
    left: 0px;
    background-color: #F5F5F5;
    width: 100%;
    height: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background-color: green;
}

Взгляните и посмотрите, что вы думаете. (вам придется нажать вниз, чтобы поместить текст и т.д., используя padding-top: 20px;

ДЕМО ЗДЕСЬ

Поделиться
  • 0
    Да, я думаю, что это делает это. Скоро проверю
  • 1
    Благодарю. Свойство position сделало это.
2

Попробуй это

**overflow:hidden;**

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;overflow:hidden;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>

Или же вы должны освоить Div высоту авто и внутренние держать 100% часть содержимого внутри.

<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: 100%; background-color: green;'>
        &nbsp;
    </div>
</div>
Поделиться
  • 1
    Но это скрыло бы нижнюю часть второго div. Я не хочу этого
  • 0
    попробуйте Bottom Sample, это лучше.
1

когда вы делаете height: inherit; , целевой контейнер приобретает высоту родителя, поэтому ваш внутренний зеленый div занимает height:100px и, следовательно, это превышение.

Вы НЕ должны делать переполнение: скрытые, так как это съест ваш более низкий контент.

Что вы должны сделать, так это либо дать процентную высоту для обоих ваших контейнеров, как

<div id="parentDiv" style='height: 100px; width: 100px; 
                             background-color: black; border: 3px solid black;'>
    <div id="topDiv" style='background-color: red;height:30%'>
        <label>Test</label>
    </div>
    <div id="lowerDiv" style='height: 70%; background-color: green;'>
    </div>
</div>

или используйте javascript для установки высоты ваших контейнеров, что-то вроде

$(window).resize(function(){
      var _heightT= $('#parentDiv').height();
      $('#topDiv').height(_height*0.3);
      $('#lowerDiv').height(_height*0.7);

 })

Я бы предложил предоставить контейнеру Parent фиксированную высоту (выведенную в соответствии с размером окна, через javascript/jQuery), чтобы он был согласован во всех браузерах, а ваши внутренние контейнеры, процентная высота или, по крайней мере, ваш верхний контейнер фиксированный высота и нижний контейнер min-height и overflow-y:auto

Поделиться
  • 0
    Да, Javascript является последним решением. Но я подумал, что может быть немного CSS вместо того, чтобы усложнять использование JavaScript. +1 за это.
  • 0
    видите, вы не можете назначить 100% высоту, потому что это будет означать, высота родительского элемента, и снова это будет превышение, вы не можете назначить height:auto , причина, что будет означать, гибкая высота (может или не может простираться до конца), ваш единственный вариант - задать высоту обоим вашим контейнерам с помощью css или javascript.
0

Вы можете использовать процентную высоту, как вы предполагали, но дело в том, когда вы устанавливаете нижний div на height:100%; это означает, что 100% высоты родительского div, которая составляет 100 пикселей, и она выйдет за пределы поля, вместо этого вы можете дать верхнему div 25% высоты и нижней высоте 75% высоты, например:

<div style='height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='height:25%; background-color: red;'>
    <label>Test</label>
    </div>
    <div style='height: 75%; background-color: green;'>
    </div>
</div>

скрипка

Поделиться
  • 0
    пожалуйста, смотрите мое последнее изменение в вопросе.
  • 0
    Вы можете задать верхний DIV со статической высотой в пикселях width:25px , а затем создать функцию , которая присваивает нижний DIV с высотой 100% -25px
0

Вы можете сделать это с помощью свойства display:table в CSS. Узнать больше

Добавить display:table в обертку div и display:table-row для детей.

Рабочая демонстрация

Поделиться
  • 0
    Я попробовал это. Но вместо того, чтобы регулировать высоту второго div, он расширяет контейнер для размещения второго div.
  • 0
    Как насчет этой скрипки ?
0

Очень просто:

<div style='overflow:hidden;height: 100px; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Test</label>
    </div>
    <div style='height: inherit; background-color: green;'>
    </div>
</div>
Поделиться
0

ОБНОВИТЬ

В соответствии с этим мы не хотим использовать overflow:hidden

Обновлено FIDDLE

<div style='height: auto; width: 100px; background-color: black; border: 3px solid black;'>
    <div style='background-color: red;'>
        <label>Header</label>
    </div>
    <div style='height: 100%; background-color: green;'>
        <label>Body</label>
        <p>Some text here</p>
        <p>Some text here</p>
        <p>Some text here</p>
        <p>Some text here</p>
    </div>
</div>
Поделиться
  • 0
    Вы читали другие комментарии? ОП уже сказал overflow:hidden не делает то, что хочет.
  • 0
    Хорошо, извините, я не видел, когда я публикую свой ответ
Показать ещё 1 комментарий
0

Когда вы делаете height:inherit, он принимает значение высоты из родительского div, что совпадает с height:100%. Но это приводит к тому, делам до переполнения, потому что есть еще один внутренний-ДИВ ребенок внутри основного контейнера div, который принимает высоту, равную по умолчанию line-height в label теге. Вы можете попытаться присвоить внутренним div тегам раздельные высоты:

HTML: (то же, что и ваша разметка, просто добавляя классы, чтобы вам не пришлось вводить встроенный стиль)

<div class="p">
    <div class="c1">
        <label>Test</label>
    </div>
    <div class="c2"></div>
</div>

CSS:

.p {
    height: 100px;
    width: 100px;
    background-color: black;
    border: 3px solid black;
}
.c1 {
    height:20%;
    background-color: red;
}
.c2 {
    height: 80%;
    background-color: green;
}

DEMO

Поделиться
  • 0
    пожалуйста, смотрите мое последнее изменение в вопросе.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню