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

133

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>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

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

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

118

jQuery

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

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

163

jQuery

event.PageX, event.PageY

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

212

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

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

164