Div не растягивается по высоте

176
02 марта 2019, 06:40

Почему левое меню не растягивается по высоте контента? Код ниже просто для того, чтобы вопрос разрешили опубликовать

<html style="height: 100%;border:1px solid yellow;"> 
 
<body style="height: 100%;border:1px solid green;"> 
  <div style="float: left; min-height: 100%; border:1px solid red;">Левое меню</div> 
  <div>Какой-то контент</div> 
</body> 
 
</html>

Answer 1

Вот пример, блок div автоматически принимает размер дочерних элементов. Указывать минимальную высоту не стоит :)

<body>
    <div style="float: left; width: 300px; border: 1px solid red">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
        </ul>
    </div>
    <div style="margin-left: 305px; border: 1px solid green">
        <p>Text Text</p>
    </div>
</body>
Answer 2

Воспользуйся флексом. Задай родительскому контейнеру display: flex и align-items: stretch, это позволит всем дочерним элементам растягиваться по высоте контейнера.

.page { 
  display: flex; 
  height: 150px; 
} 
 
.page__nav { 
  width: 100%;  
  max-width: 30%; 
  flex-shrink: 0; 
  background-color: aliceblue; 
} 
 
.page__content { 
  flex-grow: 1; 
  background-color: ghostwhite; 
}
<div class='page'> 
	<nav class="nav page__nav"> 
		Левое меню 
	</nav> 
	<main class='content page__content'> 
		Какой-то контент 
	</main> 
</div>

READ ALSO
Область видимости переменной var
HTML

Область видимости переменной var

Почему я могу получить доступ к переменной i вне цикла, в котором она использовалась?

 155
Почему JQuery работает только для одного элемента?
jQuery

Почему JQuery работает только для одного элемента?

Всем привет у меня есть таблица, куда элементы наполняются через forEach, и есть JQuery скрипт, ajax который отправляет запросы на сервакНо почему...

 205
event.PageX, event.PageY
jQuery

event.PageX, event.PageY

При перемещении курсора над элементом (подозреваю mousemove) требуется фиксировать два значения позиции курсораНапример по оси Х

 252
Связь положений XYZ камеры и игрока
c#

Связь положений XYZ камеры и игрока

Вообще, просто нужно сделать так, что бы камера и тело игрока поворачивались одинаково, ибо без этого нельзя сделать нормальную ходьбу, потому...

 197