Как сделать контейнер див с изменяемой высотой. Почему я должен использовать контейнер div в HTML? Отступы и рамки
w3 css (17)
Учитывая следующий HTML:
Я бы хотел, чтобы #copyright придерживался нижней части #container .
Могу ли я достичь этого, не используя абсолютное позиционирование? Если свойство float поддерживает значение «bottom», похоже, что это будет трюк, но, к сожалению, этого не происходит.
HTML:
CSS:
html, body { width: 100%; height: 100%; } .overlay { min-height: 100%; position: relative; } .container { width: 900px; position: relative; padding-bottom: 50px; } .height { width: 900px; height: 50px; } .footer { width: 900px; height: 50px; position: absolute; bottom: 0; }В CSS ничего не называется float:bottom . Лучше всего использовать позиционирование в таких случаях:
Position:absolute; bottom:0;
Для них есть только один ребенок в контейнере, вы можете использовать подход table-cell и vertical-align который надежно работал для позиционирования одного div внизу его родителя.
Обратите внимание, что использование table-footer-group качестве других упомянутых ответов приведет к нарушению расчета высоты родительской table .
#container { display: table; width: 100%; height: 200px; } #item { display: table-cell; vertical-align: bottom; }
Если вы хотите, чтобы он «прилипал» к низу, независимо от высоты контейнера, то абсолютное позиционирование - это путь. Конечно, если элемент авторского права является последним в контейнере, он всегда будет внизу.
Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?
Его старый вопрос, но это уникальный подход, который может помочь в нескольких случаях.
Чистый CSS, без абсолютного позиционирования, без фиксации любой высоты, кросс-браузер (IE9 +)
Поскольку обычный поток «сверху вниз», мы не можем просто просить #copyright div придерживаться нижней части своего родителя без какого-либо позиционирования какого-то рода. Но если мы хотели, чтобы #copyright div придерживался вершины его родитель, это будет очень просто - потому что это нормальный поток.
Поэтому мы будем использовать это в наших интересах. мы изменим порядок div s в HTML, теперь #copyright div находится вверху, а содержимое сразу же следует за ним. мы также делаем контент div растянутым полностью (используя псевдоэлементы и методы очистки)
теперь речь идет только о том, чтобы вернуть этот порядок обратно в представление. что легко можно сделать с помощью CSS-преобразования.
Мы вращаем контейнер на 180 градусов, а теперь: вверх-вниз. (и мы возвращаем обратно содержимое, чтобы снова выглядеть нормально)
Если мы хотим иметь scroolbar в области содержимого, нам нужно применить немного больше магии CSS. как можно показать [в этом примере содержимое находится ниже заголовка, но его та же идея]
* { margin: 0; padding: 0; } html, body, #Container { height: 100%; color: white; } #Container:before { content: ""; height: 100%; float: left; } #Copyright { background-color: green; } #Stretch { background-color: blue; } #Stretch:after { content: ""; display: block; clear: both; } #Container, #Container>div { -moz-transform: rotateX(180deg); -ms-transform: rotateX(180deg); -o-transform: rotate(180deg); -webkit-transform: rotateX(180deg); transform: rotateX(180deg); }
Фактически, принятый ответ @User будет работать только в том случае, если окно высока, а контент короткий. Но если контент высок, а окно короткое, оно поместит информацию об авторских правах на содержимое страницы, а затем прокручивается вниз, чтобы увидеть содержимое, оставив вас с плавающим уведомлением об авторских правах. Это делает это решение бесполезным для большинства страниц (например, эта страница).
Наиболее распространенный способ сделать это - продемонстрированный подход «CSS липкий нижний колонтитул» или немного более тонкое изменение. Этот подход отлично работает - если у вас есть фиксированный верхний нижний колонтитул.
Если вам нужен нижний колонтитул переменной высоты, который будет отображаться в нижней части окна, если содержимое слишком короткое, а внизу содержимого, если окно слишком короткое, что вы делаете?
Проглотите свою гордость и используйте стол.
Например:
* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; }
|
Lorem ipsum, etc.
|
Попробуйте. Это будет работать для любого размера окна, для любого количества контента для любого нижнего колонтитула любого браузера... даже IE6.
Если вы придумываете идею использования таблицы для макета, займите секунду, чтобы спросить себя, почему. CSS должен был облегчить нашу жизнь - и это в целом, но факт в том, что даже после всех этих лет он все еще является нарушенным, противоречивым беспорядком. Он не может решить каждую проблему. Это неполное.
Таблицы не круты, но по крайней мере на данный момент они иногда являются лучшим способом решения проблемы дизайна.
Если вы не знаете высоту дочернего блока:
#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;}
Если вы знаете, что высота дочернего блока добавляет дочерний блок, добавьте padding-top / margin-top:
#parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;}
Parent { display: flex; flex-direction: column; } .child { margin-top: auto; }
Parent { height: 100px; border: 5px solid #000; display: flex; flex-direction: column; } .child { height: 40px; width: 100%; background: #f00; margin-top: auto; }
Решение выше, вероятно, более гибкое, однако, это альтернативное решение:
Parent { display: flex; } .child { align-self: flex-end; }
Parent { height: 100px; border: 5px solid #000; display: flex; } .child { height: 40px; width: 100%; background: #f00; align-self: flex-end; }
В качестве дополнительной заметки вы можете добавить префиксы поставщиков для дополнительной поддержки.
Кроме того, если есть положения с использованием position:absolute; или position:relative; , вы всегда можете попробовать padding родительский div или поместить margin-top:x; , В большинстве случаев это не очень хороший метод, но в некоторых случаях он может пригодиться.
Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваше:
Вам нужно было бы форматировать div-copyright, аналогично другому контейнеру (такая же общая ширина, центровка и т. Д.), И все в порядке.
Единственный раз, когда это может быть не идеальным, - это когда ваш контейнер-div объявлен с height:100% , и пользователю потребуется прокрутить вниз, чтобы увидеть авторское право. Но даже вы можете работать (например, margin-top:-20px - когда высота вашего элемента авторского права составляет 20 пикселей).
- Абсолютное позиционирование
- Нет табличного макета
- Никаких сумасшедших css, которые выглядят по-разному в каждом другом браузере (ну, по крайней мере, IE, вы знаете)
- Простое и четкое форматирование
Кроме того: я знаю, что OP попросил решение, которое «... прилипает к дну« контейнера »div ...» , а не что-то под ним, но давайте, люди ищут хорошие решения здесь, и это это один!
Div of style, position:absolute;bottom:5px;width:100%; работает, но для этого потребовалась более ситуация с прокруткой.
Window.onscroll = function() { var v = document.getElementById("copyright"); v.style.position = "fixed"; v.style.bottom = "5px"; }
Это подход, предназначенный для создания элемента с известной высотой и шириной (по крайней мере приблизительно) с поплавком вправо и оставаясь внизу, в то время как он ведет себя как встроенный элемент к другим элементам. Он ориентирован на нижний правый угол, потому что вы можете легко разместить его в любом другом углу с помощью других методов.
Мне нужно было создать навигационную панель, которая имела бы фактические ссылки в правом нижнем углу и случайные элементы брата, при этом гарантируя, что сам бар растягивается должным образом, не нарушая макет. Я использовал элемент «shadow», чтобы занять пространство ссылок на панели навигации и добавил его в конце дочерних узлов контейнера.
#container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;}
Попробуй это;
Создайте еще один контейнер div для элементов выше #copyright . Только над авторским правом добавьте новый div:
Он заставит нижний колонтитул находиться под всем остальным, как в случае использования относительного позиционирования (bottom:0px;).Да,
вы можете сделать это без absolute позиционирования и без использования table s (которая винт с разметкой и т. Д.).
DEMO
Это проверено для работы с IE> 7, chrome, FF и является очень простой возможностью добавить к существующему макету.
Он эффективно делает то, что float:bottom , даже учитывая проблему, указанную в ответе @Rick Reilly!
Использование свойства translateY и top
Просто установите дочерний элемент на позицию: относительный и перемещайте его вверх: 100% (это высота 100% родителя) и придерживайтесь нижней части родительского объекта путем преобразования: translateY (-100%) (это -100% высоты ребенок).
- вы не берете элемент из потока страницы
- он динамичен
Но все же просто обходной путь:(
Copyright{ position: relative; top: 100%; transform: translateY(-100%); }
Не забывайте префиксы для более старого браузера.
Контейнером называют элемент html-страницы, который предназначен для выделения определенного ее фрагмента. Это может быть абзац, заголовок, цитата, текстовый фрагмент и проч. Браузер никак не выделяет контейнер на html-странице.
При помощи контейнера веб-мастер может "привязать" к определенному элементу html-страницы нужный стиль. Кроме этого, контейнер обеспечивает "привязку" поведения к элементу html-страницы.
Контейнеры бывают двух видов: блочные контейнеры и встроенные контейнеры.
Встроенный контейнер является частью блочного элемента html-страницы. Например, блочным контейнером может быть фрагмент текста абзаца, графическое изображение, которое помещено в абзац и проч.
Для создания встроенного контейнера предназначен парный тег SPAN . Нужный фрагмент блочного элемента помещается внутрь тега SPAN , а в CSS создается нужный стиль, который затем "привязывается" к тегу SPAN .
| ПРИМЕР:
Block {font-color: red} ... Ягоды у рябины красного цвета. |
Блочные контейнеры
Блочный контейнер формируется при помощи парного тега DIV и используется достаточно часто. В блочный контейнер помещают различные блочные элементы: абзацы, заголовки, таблицы и проч.
Иногда бывает необходимо произвести выравнивание большого блока документа, содержащего не только текст, но и рисунки, таблицы и т.п. Для этих целей используется элемент-контейнер DIV . Спецификация элемента DIV:
ALIGN="выравнивание">
Атрибут ALIGN определяет тип выравнивания содержимого и может иметь те же значения, что и элемент P.
Отступы
Иногда требуется отобразить блок текста с отступом. Для этого блок текста помещают в элемент-контейнер BLOCKQUOTE . Тогда содержимое этого элемента будет отображаться с небольшими отступами слева и справа, а также отделяться от остального текста пустыми строками.
Таблицы
Одним из наиболее мощных и широко применяемых в HTML средств являются таблицы. Они используются не только традиционно как метод представления данных, но и как средство форматирования Web-страниц. Документ HTML может содержать произвольное число таблиц, причем допускается вложенность таблиц друг в друга.
Каждая таблица начинается тегом <TABLE > и заканчивается тегом TABLE >. Внутри этой пары тегов располагается описание содержимого таблицы. Любая таблица состоит из одной или нескольких строк, в которых задаются данные для отдельных ячеек.
Каждая строка начинается тегом <TR > и заканчивается тегом TR >. Отдельная ячейка в строке обрамляется парой тегов <TD > и TD > или <TH > и TH >. Тег
Теги
Пример таблицы:
Этот пример отобразится в броузере так:
Спецификация тега
