Как разместить div внизу другого diva
Помогите тупому, не могу разместить блок ниже другого, я так понимаю дела в кнопке, но не могу найти конкретно где, не много(очень сильно) запутался в коде. Вот собственно сам код — https://jsfiddle.net/gve18hdc/
Разметка и основные стили:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77
html lang="en"> head> meta charset="UTF-8"> title>Астыкжанtitle> link rel="preconnect" href="https://fonts.gstatic.com"> link href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;1,300&family=Open+Sans:wght@300;400&display=swap" rel="stylesheet"> link rel="stylesheet" href="css/style.css"> script src="https://code.jquery.com/jquery-2.1.1.min.js"> script> head> body> div class="header"> div class="header-top"> div class="container"> a href="tel:+77479009999" class="tel"> +7 747 900 99 99 a> a href="#" class="pay"> Оплата a> a href="#" class="feedback">Обратная связьa> div class="select-box"> label for="select-box1" class="label select-box1">span class="label-desc">Ваш городspan> label> select id="select-box1" class="select"> option value="Choice 1">Нур-Султанoption> option value="Choice 2">Костанайoption> select> div> div> div> div> div class="media"> div class="logo"> a href="/index.html"> img src="img/ex.jpg"> a> div> div class="r-icon"> a href="#"> img src="img/user.png"> a> div> div class="register"> a href="#"> Вход/Регистрация a> div> div id="cart"> button class="learn-more"> span class="circle" aria-hidden="true"> span class="icon arrow">span> span> span class="button-text">Корзинаspan> button> div> div> script> $("select").on("click", function() { $(this).parent(".select-box").toggleClass("open"); }); $(document).mouseup(function(e) { var container = $(".select-box"); if (container.has(e.target).length === 0) { container.removeClass("open"); } }); $("select").on("change", function() { var selection = $(this).find("option:selected").text(), labelFor = $(this).attr("id"), label = $("[for='" + labelFor + "']"); label.find(".label-desc").html(selection); }); script> body> html> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231
body { padding: 0; margin: 0; box-sizing: border-box; font-size: 16px; } * { box-sizing: border-box; } .container, .select-box, .media { width: 100%; padding-left: 30px; padding-right: 30px; } h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; text-transform: uppercase; } h2 { font-size: 50px; margin-bottom: 58px; } h3 { font-size: 25px; margin-bottom: 28px; } .tel { position: relative; font-size: 16px; margin-bottom: 25px; margin-right: 850px; padding-left: 30px; vertical-align: top; } .pay { margin-right: 20px; vertical-align: top; text-align: center; margin-left: 225px; } .feedback { vertical-align: top; text-align: center; } section { padding-top: 113px } p { margin: 0; } ul, li { display: block; padding: 0; margin: 0; } .header-top { padding: 4px 0; padding-top: 4px; padding-right: 0px; padding-bottom: 4px; padding-left: 0px; height: 27px; position: relative; } .select-box { cursor: pointer; position: relative; max-width: 20em; vertical-align: top; margin-top: -37px; margin-left: 250px; width: 200px; } .select, .label { padding-top: 20px; height: 26px; display: flex; align-items: center; } .select { width: 100%; position: absolute; top: 0; padding: 5px 0; height: 40px; border: 0 none; } .label { position: relative; padding: 5px 10px; cursor: pointer; } .open .label::after { content: "▲"; } .label::after { content: "▼"; font-size: 12px; position: absolute; right: 0; top: 1; padding: 1px 20px; } .media { display: flex; flex-direction: row; justify-content: flex-start; padding-top: 20px; } .logo { display: inline-block; justify-content: space-between; align-items: center; max-width: 1400px; padding-left: 30px; } .logo img { width: 245px; height: 50px; } .r-icon { width: 100%px; display: inline-block; padding-right: 30px; padding-left: 890px; } .r-icon img { width: 40px; height: 40px; } .register a { margin-right: 12px; font-size: 14px; } * { box-sizing: border-box; } *::before, *::after { box-sizing: border-box; } body { font-size: 1rem; line-height: 1.5; display: block; align-items: center; justify-content: center; margin: 0; min-height: 100vh; } button.learn-more { width: 12rem; height: auto; } button.learn-more .circle { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: relative; display: block; margin: 0; width: 3rem; height: 3rem; background: #282936; border-radius: 1.625rem; } button.learn-more .circle .icon { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; bottom: 0; margin: auto; background: #fff; } button.learn-more .circle .icon.arrow { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); left: 0.625rem; width: 1.125rem; height: 0.125rem; background: none; } button.learn-more .circle .icon.arrow::before { position: absolute; content: ""; top: -0.25rem; right: 0.0625rem; width: 0.625rem; height: 0.625rem; border-top: 0.125rem solid #fff; border-right: 0.125rem solid #fff; transform: rotate(45deg); } button.learn-more .button-text { transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1); position: absolute; top: 0; left: 0; right: 0; bottom: 0; padding: 0.75rem 0; margin: 0 0 0 1.85rem; color: #282936; font-weight: 700; line-height: 1.6; text-align: center; text-transform: uppercase; } @supports (display: grid) { body { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 0.625rem; grid-template-areas: ". main main ." ". main main ."; } #container { grid-area: main; align-self: center; justify-self: center; } }
Как прижать элемент к низу блока css
Простейший вариант для манипуляции одного блока относительно другого решается с помощью позиционирования. Исходный HTML файл:
class="wrapper"> class="content">i am a wrapper class="inside">i am inside Допустим необходимо блок с классом 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; > Ничего не помогает. Как прижать div к низу родителя?
У вас у родителя есть position : relative, отлично, тогда можно задать вашим дивам position : absolute; bottom : 0px; по идее должно вам помочь.
если я так сделаю, то фотографии будут прижаты не к родительскому блоку, а к блоку выше родительского.
Вообщем, всё равно не получается. Задал статичную высоту родителю, а фотографиям маргин, ибо катись оно конём
.maria .foto width: 510px height: 794px background: url(../img/maria.png) no-repeat float: right position:absolute bottom:0px right:0px .foto:hover background: url(../img/mariahover.png) no-repeat .oleg .foto width: 510px height: 794px background: url(../img/oleg.png) no-repeat float: left position:absolute bottom:0px left:0px .foto:hover background: url(../img/oleghover.png) no-repeat .trainers min-height: 100vh height: 100vh background: url(../img/bg-trainers.jpg) background-size: cover background-position: center position: relativeПрижать блок в низу CSS — как прижать блок к низу
В чем проблема: футер (нижняя часть сайта) по умолчанию становится сразу за основным контентом и не прижимается к низу страницы.
Как должно выглядеть после решения проблемы: прижать футер к низу страницы, если контента не хватает.
На изображении ниже слева отображена страница на которой нижняя часть идет сразу за контентом (проблема), а справа страница с решенной проблемой, где нижний блок всегда прижат к низу.
На данной странице Вы можете посмотреть страницу, которая создана именно таким образом:
Посмотреть примерСкачать
Если Вы хотите научиться создавать продающие страницы с нуля, а не только подписные, тогда рекомендую свой мини-курс: «Лендинг за 60 минут».
Как прижать блок к низу?
1 HTML структура
Рассмотрим всё на простой структуре из 3-х блоков:
div id="container"> div id="header"> /div> div id="body"> /div> div id="footer"> /div> /div>
Один общий блок, в котором находятся три видимых блока.
2 Стили CSS
Здесь также всё довольно просто:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
html, body { height:100%; } #container { min-height:100%; position:relative; } /*Стили для блока с шапкой*/ #header { background:#222; padding:10px; } /*Стили для центральной части*/ #body { padding-bottom:70px; /* Высота блока "footer" */ } /*Стили для нижней части*/ #footer { position:absolute; bottom:0; width:100%; height:70px; /* Высота блока "footer" */ background:#66ccff; }
Здесь хочу отметить строки с комментариями, которые находятся за свойствами. Это внутренний отступ снизу у центральной части и это же число у высоты нижней части (футера). В этом и есть весь секрет.
Вывод
Для сайтов, которые рассчитаны для одного экрана, это простой способ решить проблему и прижать блок к низу на чистом CSS.
Если не получается прижать блок к низу: Вы можете обратиться ко мне за помощью, предварительно записавшись на SKYPE консультацию!