Как прижать элемент к низу блока css
Ответы
Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:
<body>
<div class="wrapper">
<div class="content">i am a wrapper
<div class="inside">i am inside</div>
</div>
</div>
</body>
Допустим необходимо блок с классом inside разместить в нижней части относительно блока с классом content:
.wrapper {
/* Отцентрируем блоки для экспериментов и зададим им ширину*/
margin: 100px auto;
width: 300px;
}
.content {
background-color: #38d9a9;
height: 200px;
position: relative;
}
.inside {
/* абсолютное позиционирование */
position: absolute;
/* прижимаем блок к нижней границе относительно блока с position: relative*/
bottom: 0;
/* задаем ширину и цвет бэкграунда для наглядности*/
width: 100%;
height: 75px;
background-color: #444;
}
1
0
