Блог

Главная - Вопросы по программированию - Как я могу получить высоту 100% блока боковой панели?

Как я могу получить высоту 100% блока боковой панели?

#html #css

#HTML #css

Вопрос:

У меня есть эта HTML-разметка:

 ...
    <div style="background-color: #bcceb4; width: 300px;">
        <div style="background-color: yellow; width: 100px; float: left;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
    </div>
...

Вот скриншот

Мне нужен желтый блок, чтобы заполнить все пространство. Высота 100% и наследование не работают!

Ответ №1:

Установите высоту основного div, например, 200 пикселей, и оба div установят на 100% высоту

 <div style="background-color: #bcceb4; width: 300px;height:200px">
<div style="display:inline-block; background-color: yellow; width: 100px;float: left;height:100%;">1</div>
<div style="display:inline-block; background-color: yellowgreen; width: 200px; float: left;height:100%;">3</div>
<div style="clear: both;"></div>

Попробуйте это:

JSFIDDLE

Комментарии:

1. Я не знаю высоту основного тега, потому что это будет зависеть от высоты блока yellowgreen и его динамического содержимого

Ответ №2:

Установите ширину желтого блока на 100% ? Как в:

jsFiddle

Это то, что вы имеете в виду?

Комментарии:

1. Нет, мне нужно заполнить его по вертикали, а не по горизонтали.

Ответ №3:

Вы можете использовать :after и задать там высоту:

HTML

 <div style="background-color: #bcceb4; width: 300px;">
        <div class="yellowCont" style="background-color: yellow; width: 100px;float:left;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
</div>

css

 .yellowCont:after{
    content: "";
    background-color: yellow;
    width: 100px;    
    height:175px;
    display: inline-block;
}

скрипка

Ответ №4:

Когда вы указываете 100% или inherit , это должно ссылаться на родительскую высоту, если вы добавите 100% только к желтому div, это будет 100% от его родительского элемента, для которого вы не указали ehgith

Добавьте высоту inherit или 100% к родительскому и всем уровням между основным и желтым.

Пример:

 div id="main" style="height:300px";> // your dynamic div
    <div style="background-color: #bcceb4;height:inherit">
        <div style="background-color: yellow; width: 100px; float: left;height:100%;">1</div>
        <div style="background-color: yellowgreen; width: 200px; height: 200px; float: left;">3</div>
        <div style="clear: both;"></div>
    </div>
</div>

Jsfiddle

Ответ №5:

Стиль CSS по своей сути не равен 100%. Это по своей сути автоматически, что означает только то пространство, которое необходимо. Вы должны указать его высоту: 100% в противном случае по умолчанию будет достаточно места для текста плюс отступ по умолчанию.