Смартфоны

Контейнерный Web-дизайн. Основные теги HTML Элементы контейнеры html

20.01.2024
Контейнерный Web-дизайн. Основные теги HTML Элементы контейнеры html


w3 css (17)

Учитывая следующий HTML:

Я бы хотел, чтобы #copyright придерживался нижней части #container .

Могу ли я достичь этого, не используя абсолютное позиционирование? Если свойство float поддерживает значение «bottom», похоже, что это будет трюк, но, к сожалению, этого не происходит.

HTML: content footer 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; } Single bottom item

Если вы хотите, чтобы он «прилипал» к низу, независимо от высоты контейнера, то абсолютное позиционирование - это путь. Конечно, если элемент авторского права является последним в контейнере, он всегда будет внизу.

Можете ли вы расширить свой вопрос? Объясните, что именно вы пытаетесь сделать (и почему вы не хотите использовать абсолютное позиционирование)?

Его старый вопрос, но это уникальный подход, который может помочь в нескольких случаях.

Чистый 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); } Copyright Foo web designs Element 1 Element 2

Фактически, принятый ответ @User будет работать только в том случае, если окно высока, а контент короткий. Но если контент высок, а окно короткое, оно поместит информацию об авторских правах на содержимое страницы, а затем прокручивается вниз, чтобы увидеть содержимое, оставив вас с плавающим уведомлением об авторских правах. Это делает это решение бесполезным для большинства страниц (например, эта страница).

Наиболее распространенный способ сделать это - продемонстрированный подход «CSS липкий нижний колонтитул» или немного более тонкое изменение. Этот подход отлично работает - если у вас есть фиксированный верхний нижний колонтитул.

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

Проглотите свою гордость и используйте стол.

Например:

* { padding: 0; margin: 0; } html, body { height: 100%; } #container { height: 100%; border-collapse: collapse; }

Lorem ipsum, etc.
Copyright some evil company...

Попробуйте. Это будет работать для любого размера окна, для любого количества контента для любого нижнего колонтитула любого браузера... даже IE6.

Если вы придумываете идею использования таблицы для макета, займите секунду, чтобы спросить себя, почему. CSS должен был облегчить нашу жизнь - и это в целом, но факт в том, что даже после всех этих лет он все еще является нарушенным, противоречивым беспорядком. Он не может решить каждую проблему. Это неполное.

Таблицы не круты, но по крайней мере на данный момент они иногда являются лучшим способом решения проблемы дизайна.

Если вы не знаете высоту дочернего блока:

#parent{background:green;width:200px;height:200px;display:table-cell;vertical-align:bottom;} .child{background:red;vertical-align:bottom;} child

Если вы знаете, что высота дочернего блока добавляет дочерний блок, добавьте padding-top / margin-top:

#parent{background:green;width:200px;height:130px;padding-top:70px;} .child{background:red;vertical-align:bottom;height:130px;} child

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; } Align to the bottom

Решение выше, вероятно, более гибкое, однако, это альтернативное решение:

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; } Align to the bottom

В качестве дополнительной заметки вы можете добавить префиксы поставщиков для дополнительной поддержки.

Кроме того, если есть положения с использованием position:absolute; или position:relative; , вы всегда можете попробовать padding родительский div или поместить margin-top:x; , В большинстве случаев это не очень хороший метод, но в некоторых случаях он может пригодиться.

Просто потому, что это вообще не упоминалось, что обычно хорошо работает в таких ситуациях, как ваше:

Вам нужно было бы форматировать div-copyright, аналогично другому контейнеру (такая же общая ширина, центровка и т. Д.), И все в порядке.

Copyright Foo web designs

Единственный раз, когда это может быть не идеальным, - это когда ваш контейнер-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», чтобы занять пространство ссылок на панели навигации и добавил его в конце дочерних узлов контейнера.

Copyright Foo web designs filler #copyright { display:inline-block; position:absolute; bottom:0; right:0; } #copyright-s { float:right; visibility:hidden; width:20em; /* ~ #copyright.style.width */ height:3em; /* ~ #copyright.style.height */ }

#container{width:100%; float:left; position:relative;} #copyright{position:absolute; bottom:0px; left:0px; background:#F00; width:100%;} #container{background:gray; height:100px;} Copyright Foo web designs

Попробуй это;

Copyright Foo web designs

Создайте еще один контейнер div для элементов выше #copyright . Только над авторским правом добавьте новый div: Он заставит нижний колонтитул находиться под всем остальным, как в случае использования относительного позиционирования (bottom:0px;).

Да, вы можете сделать это без absolute позиционирования и без использования table s (которая винт с разметкой и т. Д.).

DEMO
Это проверено для работы с IE> 7, chrome, FF и является очень простой возможностью добавить к существующему макету.

Some content you don"t want affected by the "bottom floating" div supports not just text Some other content you want kept to the bottom this is in a div #container { height:100%; border-collapse:collapse; display: table; } .foot { display: table-row; vertical-align: bottom; height: 1px; }

Он эффективно делает то, что float:bottom , даже учитывая проблему, указанную в ответе @Rick Reilly!

Использование свойства translateY и top

Просто установите дочерний элемент на позицию: относительный и перемещайте его вверх: 100% (это высота 100% родителя) и придерживайтесь нижней части родительского объекта путем преобразования: translateY (-100%) (это -100% высоты ребенок).

  • вы не берете элемент из потока страницы
  • он динамичен

Но все же просто обходной путь:(

Copyright{ position: relative; top: 100%; transform: translateY(-100%); }

Не забывайте префиксы для более старого браузера.

HTML-теги — основа языка HTML. Теги используются для разграничения начала и конца элементов в разметке.

Каждый HTML-документ состоит из дерева HTML-элементов и текста. Каждый HTML-элемент обозначается начальным (открывающим) и конечным (закрывающим) тегом. Открывающий и закрывающий теги содержат имя тега.

Все HTML-элементы делятся на пять типов:

Возможно вас заинтересует

Copyright © 2024. Сматрфоны. Планшеты. Интернет. Роутеры. Windows. Компьютер