bottom в CSS


bottom

Браузер Internet Explorer Netтscape Опера Safari Mozilla Firefox
Версия 5.5 6.0 7.0 8.0 8.0 9.0 7.0 8.0 9.2 9.5 1.3 2.0 3.1 1.5 2.0 3.0
Поддерживается Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да Да

Краткая информация

CSS (ЦСС) CSS (ЦСС)2
Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам
Аналог ШТМЛ Нет
Ссылка на спецификацию http://www.w3.org/TR/CSS21/visuren.ШТМЛ#propdef-bottom

Описание

Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов. Отсчет координат зависит от параметра position , он обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

При относительном позиционировании элемента, отсчет ведется от нижнего края исходного положения элемента (рис. 1), а при абсолютном — относительно нижнего края окна объекта (рис. 2).

Рис. 1. Значение параметра bottom при относительном позиционирование элемента

Рис. 2. Значение параметра bottom при абсолютном позиционирование элемента

Синтаксис

bottom: значение | проценты | auto

Аргументы

В качестве значений принимаются любые единицы длины, принятые в CSS (ЦСС) — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение параметра bottom может быть и отрицательным, в этом случае возможны наложения разных элементов друг на друга. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента. Аргумент auto не изменяет положение элемента.

ШТМЛ 4.01 CSS (ЦСС) 2.1 IE 5.5 IE 6 IE 7 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

Результат данного примера показан ни рис. 3.

CSS стиль bottom


Определяет для позиционируемого блока расстояние от нижнего края блока до нижнего края родителя, не включая отступ, поле и высоту рамки. Настольные Мобильные

Internet Explorer Chrome Opera Safari Firefox
7 1 5 1 1
Android Firefox Mobile Opera Mobile Safari Mobile
1 1 6 1

Отсчет координат зависит от значения свойства position. Если оно равно absolute , в качестве родителя выступает окно браузера и положение элемента определяется от его нижнего края.

Значение свойства bottom относительно окна браузера

В случае значения relative , отсчет идет от нижнего края исходного положения элемента. Если для родительского элемента задано CSS свойство position: relative , то абсолютное позиционирование дочерних элементов определяет их положение от нижнего края родителя.

Значение свойства bottom относительно родителя

Краткая информация по CSS-свойству bottom

Значение по умолчанию auto
Наследуется Нет
Применяется Ко всем элементам

Правила написания свойства bottom

В качестве значений размера принимаются любые единицы длины, принятые в CSS — например, пикселы (px), дюймы (in), пункты (pt) и др. Значение свойства bottom может быть как положительным, так и отрицательным. При задании значения в процентах, положение элемента вычисляется в зависимости от высоты родительского элемента.

Илон Маск рекомендует:  Шаблон сайта кофейни HTML, CSS, JS

bottom

Свойство CSS bottom используется для указания расстояния смещения вверх (или вниз) нижнего края позиционируемого элемента относительно нижнего внутреннего края рамки (CSS border) одного из его элементов-предков или окна браузера (абсолютное позиционирование) либо относительно начального положения нижнего края самого элемента (относительное позиционирование). Это зависит от значения свойства position как самого элемента, так и его предков.

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

Тип свойства

Применяется: к позиционируемым элементам, то есть тем, у которых свойство CSS position имеет значения absolute , fixed или relative .

Значения

Значением свойства CSS bottom является указание расстояния одним из следующих способов:


  • Проценты — значения в процентах (%), где за 100% берется высота элемента-предка по следующему алгоритму:
    1. Для относительно позиционируемых элементов (relative) берется высота ближайшего блочного (block) элемента-предка, встроенного блока (inline-block) или ячейки таблицы, а если таких нет, то высота тела документа (тег ).
    2. Для фиксированных абсолютно позиционированных элементов (fixed) берется высота окна браузера.
    3. Для абсолютно позиционированных элементов (absolute) берется высота элемента относительно которого происходит позиционирование с учетом его внутренних отступов (CSS padding), а если такого нет, то высота окна браузера.

    Разрешено указывать отрицательные процентные значения (-20%).

  • Размеры — относительные или абсолютные величины в единицах измерения принятых в CSS, например: пиксели (px), пункты (pt), сантиметры (cm) и т.д. Для них также разрешены отрицательные значения.
  • auto — положение нижнего края элемента по вертикали, как без применения позиционирования.
  • inherit — наследует значение CSS bottom от родительского элемента.

Процентная запись: исходя из высоты элемента, относительно которого происходит позиционирование, или окна браузера.

Значение по умолчанию: auto.

Синтаксис

Пример CSS: использование bottom

Версии CSS

Версия: CSS 1 CSS 2 CSS 2.1 CSS 3
Поддержка: Нет Да Да Да

Браузеры

Браузер: Internet Explorer Google Chrome Mozilla Firefox Opera Safari
Версия: 6.0 и 7.0 8.0 и выше 2.0 и выше 2.0 и выше 9.2 и выше 3.1 и выше
Поддержка: Частично Да Да Да Да Да

Internet Explorer 6.0 и 7.0 не понимают значение inherit . Internet Explorer 6.0 не изменяет размеры позиционируемого блока при одновременном указании свойств CSS top и bottom или left и right, когда размеры блока не заданы явно.

bottom

Поддержка браузеров

IE Opera Chrome Firefox Safari
IE до 7.0 (включ.) не поддерживает значение inherit. В IE6 нельзя одновременно задать top, left, right, bottom + + + +

Пример

Делаем нижний край изображения на 5 пикселей над нижним краем элемента, который содержит это изображение:


Описание и использование

Свойство CSS bottom устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.

При относительном позиционировании элемента отсчет ведется от нижнего края исходного положения элемента. При абсолютном — от нижнего края документа.

CSS свойство bottom

CSS свойство bottom устанавливает положение элемента совместно со свойством position.

Если элементы статичны, то это считается состоянием по умолчанию. В данном случае свойство bottom не имеет эффекта. Когда позиционирование элемента установлена на «relative», «absolute», «fixed», или «sticky», значение bottom играет большую роль. Если позиция установлена на «fixed», при прокручивании элемент на экране остается фиксированным. Если позиция установлена на «absolute», отсчет ведется относительно нижнего края блока. Если позиция установлена на «relative», элемент перемещается вверх или вниз относительно его текущей позиции. Если позиция установлена на «sticky», позиция элемента будет относительна, когда элемент находится в окне просмотра и, так же как и позиция, фиксирована, когда находится вне него.

CSS bottom Property

Example

Set the bottom edge of the

Definition and Usage

The bottom property affects the vertical position of a positioned element. This property has no effect on non-positioned elements.

  • If position: absolute; or position: fixed; — the bottom property sets the bottom edge of an element to a unit above/below the bottom edge of its nearest positioned ancestor.
  • If position: relative; — the bottom property makes the element’s bottom edge to move above/below its normal position.
  • If position: sticky; — the bottom property behaves like its position is relative when the element is ins >bottom property has no effect.
Default value: auto
Inherited: no
Animatable: yes. Read about animatable Try it
Version: CSS2
JavaScript syntax: object.style.bottom=»10px» Try it

Browser Support


The numbers in the table specify the first browser version that fully supports the property.

bottom

На этой странице

CSS свойство bottom частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. bottom не применится, если задано position: static ).

Исходный код этого интерактивного примера хранится в GitHub репозитории. Если вы хотите внести свой вклад в проект интерактивных примеров, скопируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на перенос.

Эффект свойства bottom зависит от того, как позиционируется элемент (то есть от значения свойства position ):

  • Когда задано position: absolute или fixed — свойство bottom устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.
  • Когда задано position: relative — свойство bottom устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.
  • Когда задано position: sticky — свойство bottom работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
  • Когда задано position: static — свойство bottom не имеет никакого эффекта.

Когда заданы оба свойства top и bottom , а свойство height не задано, auto или равно 100% , то оба свойства top и bottom учитываются. Если свойство height задано, то свойство top будет учтено, а bottom — проигнорировано.

Синтаксис

Значения

Процент от высоты родительского блока. auto Ключевое слово, которое указывает, что:

  • для абсолютно спозиционированных элементов — позиция элемента опирается на свойство top , пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto , то элемент располагается так же, как при статическом позиционировании.
  • для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве top ; если значение top также auto , элемент вообще не перемещается по вертикали.

inherit Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как , представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как width, height, margin, padding, и font-size.»>

или ключевое слово auto .

Формальный синтаксис

Пример


Этот пример демонстрирует разницу в поведении свойства bottom , когда position является absolute и fixed .

Свойство CSS bottom

img
<
position:absolute;
bottom:5px;
>

Описание и использование

Свойство CSS bottom действует для абсолютно позиционированных элементов и устанавливает расстояние между нижней границей элемента и нижней границей его родителя. В случае, если элемент не вложен в другой элемент, родителем считается body.

Для относительно позиционированных элементов, свойство bottom задает расстояние между нижней границей элемента и положением нижней границы элемента при обычном позиционировании (static).

Заметка: Если позиция элемента задана «static», свойство bottom не оказывает никакого эффекта.

Значение по умолчанию авто
Наследование нет
Версия CSS CSS 2
Синтаксис JavaScript object.style.bottom=»50px»

Поддержка в браузерах

Свойство bottom поддерживается всеми основными браузерами.

Заметка: ни одна из версий IE (включая IE8) не поддерживает значение inherit.

Bottom в CSS

Свойство bottom используется совместно со свойством position (подробнее здесь. ), и устанавливает расстояние, без учета толщины границ и величины отступов (свойство margin ), между нижней границей текущего элемента и:

— нижней границей родительского элемента;

— нижним краем окна браузера;

— или относительно первоначального места положения нижней границы данного элемента.


Это свойство применимо к позиционированным элементам, т.е. к элементам, для которых значение свойства position не равно static .

Значение

Значение задается в единицах длины, принятых в CSS (подробнее здесь. ) или в %

— auto – положение элемента не изменяется,

— inherit — принимает значение свойства родительского элемента.

Align DIV to bottom of the page

I have a DIV that needs to be aligned to the bottom of a search result page, problem is whenever there is no search result or less rows of search result displayed on the page, the DIV goes up from the bottom of the page.

but it should be placed like this

and whenever there are more rows and the page can be scrolled down, the DIV should be place like this.

My currrent code looks like this

5 Answers 5

Right I think I know what you mean so lets see.

This demo have the height of content height: 1000px; so you can see what it would look like scrolling down the bottom.

This demo has the height of content height: 100px; so you can see what it would look like with no scrolling.

So this will move the footer below the div content but if content is not bigger then the screen (no scrolling) the footer will sit at the bottom of the screen. Think this is what you want. Have a look and a play with it.

Updated fiddles so its easier to see with backgrounds.

Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL