Html div relative bottom

How to align content of a div to the bottom

The header section is fixed height, but the header content may change. I would like the content of the header to be vertically aligned to the bottom of the header section, so the last line of text «sticks» to the bottom of the header section. So if there is only one line of text, it would be like:

----------------------------- | Header title | | | | header content (resulting in one line) -----------------------------

----------------------------- | Header title | | header content (which is so | much stuff that it perfectly | spans over three lines) -----------------------------

29 Answers 29

Relative+absolute positioning is your best bet:

#header < position: relative; min-height: 150px; >#header-content < position: absolute; bottom: 0; left: 0; >#header, #header *

 
Title
 
And in the last place, where this might not be the case, they would be of long standing, would have taken deep root, and would not easily be extirpated. The scheme of revising the constitution, in order to correct recent breaches of it, as well as for other purposes, has been actually tried in one of the States.
 

But you may run into issues with that. When I tried it I had problems with dropdown menus appearing below the content. It’s just not pretty.

Honestly, for vertical centering issues and, well, any vertical alignment issues with the items aren’t fixed height, it’s easier just to use tables.

Источник

Свойство position

Свойство position позволяет сдвигать элемент со своего обычного места. Цель этой главы – не только напомнить, как оно работает, но и разобрать ряд частых заблуждений и граблей.

position: static

Статическое позиционирование производится по умолчанию, в том случае, если свойство position не указано.

Его можно также явно указать через CSS-свойство:

Такая запись встречается редко и используется для переопределения других значений position .

Здесь и далее, для примеров мы будем использовать следующий документ:

 
Без позиционирования ("position: static"). 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

В этом документе сейчас все элементы отпозиционированы статически, то есть никак.

Элемент с position: static ещё называют не позиционированным.

position: relative

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

Для того, чтобы применить относительное позиционирование, необходимо указать элементу CSS-свойство position: relative и координаты left/right/top/bottom .

Этот стиль сдвинет элемент на 10 пикселей относительно обычной позиции по вертикали:

position: relative; top: 10px;

 h2 
Заголовок сдвинут на 10px вниз. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Координаты

Для сдвига можно использовать координаты:

• top – сдвиг от «обычной» верхней границы
• bottom – сдвиг от нижней границы
• left – сдвиг слева
• right – сдвиг справа

Не будут работать одновременно указанные top и bottom , left и right . Нужно использовать только одну границу из каждой пары.

Возможны отрицательные координаты и координаты, использующие другие единицы измерения. Например, left: 10% сдвинет элемент на 10% его ширины вправо, а left: -10% – влево. При этом часть элемента может оказаться за границей окна:

 h2 
Заголовок сдвинут на 10% влево. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Свойства left/top не будут работать для position:static . Если их всё же поставить, браузер их проигнорирует. Эти свойства предназначены для работы только с позиционированными элементами.

position: absolute

Абсолютное позиционирование делает две вещи:

1. Элемент исчезает с того места, где он должен быть и позиционируется заново. Остальные элементы, располагаются так, как будто этого элемента никогда не было.
2. Координаты top/bottom/left/right для нового местоположения отсчитываются от ближайшего позиционированного родителя, т.е. родителя с позиционированием, отличным от static . Если такого родителя нет – то относительно документа.

• Ширина элемента с position: absolute устанавливается по содержимому. Детали алгоритма вычисления ширины описаны в стандарте.
• Элемент получает display:block , который перекрывает почти все возможные display (см. Relationships between „display“, „position“, and „float“).

Например, отпозиционируем заголовок в правом-верхнем углу документа:

 h2 
Заголовок в правом-верхнем углу документа. 
Заголовок
 
А тут - всякий разный текст. 
. В две строки!
 

Важное отличие от relative : так как элемент удаляется со своего обычного места, то элементы под ним сдвигаются, занимая освободившееся пространство. Это видно в примере выше: строки идут одна за другой.

Так как при position:absolute размер блока устанавливается по содержимому, то широкий Заголовок «съёжился» до прямоугольника в углу.

Иногда бывает нужно поменять элементу position на absolute , но так, чтобы элементы вокруг не сдвигались. Как правило, это делают, меняя соседей – добавляют margin/padding или вставляют в документ пустой элемент с такими же размерами.

В абсолютно позиционированном элементе можно одновременно задавать противоположные границы.

Браузер растянет такой элемент до границ.

Источник

position div to bottom of containing div

relative, yes, and then it doesn’t know how large it needs to be to hold the child-div content, unfortunately, so unless that is a static-value, back to the original question. How to place one div at the bottom of another div (implied: «without breaking everything»).

3 Answers 3

Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn’t defined it will use the body.

absolute searches for the nearest relative parent. By default it’s the body of the document . So if no parent DOM object ( .outside ) has the property of being relative your .inside will go to to the bottom of the body tag.

«Absolute positioning looks for the nearest relatively positioned parent within the DOM, if one isn’t defined it will use the body.» You just explained so much for me! Now I really start to understand CSS. THANK YOU!

Absolute actually searches for the nearest non default (= static) positioned ancestor, which is often relatively positioned. It also doesn’t have to be a direct parent but can for example be a grandparent.

This depends on constant heights, which is VERY BAD. A simple change of font, font size, padding, margins and god knows what else demands experimentation to guess the new height.

Assign position:relative to .outside , and then position:absolute; bottom:0; to your .inside .

I can not use position: absolute; for second div. that is my restriction, can you give me other options?

Elements that are positioned relatively are still considered to be in the normal flow of elements in the document. In contrast, an element that is positioned absolutely is taken out of the flow and thus takes up no space when placing other elements. The absolutely positioned element is positioned relative to nearest positioned ancestor. If a positioned ancestor doesn’t exist, the initial container is used.

The «initial container» would be , but adding the above makes .outside positioned.

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2023.7.27.43548

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Источник

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

  
// DIV stuff