Как спозиционировать элементы по верху, по низу и по центру родителя?

@[progeR] · Регистрация: 20.08.2011

Студворк — интернет-сервис помощи студентам

Добрый вечер.
Помогите, как сделать такую разметку, как во вложении? Уж всякие позишены, дисплеи, топы и ботомы задавал, на выходе какой-то треш получается.

Спасибо.

@malframe · 12.05.2013, 19:48

На мой взгляд самое примитивное что может быть:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<div id="container">
<div class="header">
</div>
 
<div class="content">
<table>
...
</table>
</div>
 
<div class="footer">
</div>
</div>

Сообщение от [progeR]

Уж всякие позишены, дисплеи, топы и ботомы задавал

Может выложите? Посмотрю на существующий код и подскажу где что исправить.

@[progeR] · 12.05.2013, 20:32 **[ТС]**

Мне нужно позиционирование. На картинке же специально указал числа.

@Lovrentiy · 12.05.2013, 20:44

сделайте позиционирование абсолютное для верхнего дива top:0; для нижнего bottom:0;

@[progeR] · 12.05.2013, 21:09 **[ТС]**

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

@Lovrentiy · 12.05.2013, 21:16

ну дак и задайте ему ширину.... Для начала задайте ширину родителю, затем и детям

@[progeR] · 12.05.2013, 21:20 **[ТС]**

Как задать? Попиксильно подогнать, чтобы все влезало? Это должно автоматически делаться.

@Lovrentiy · 12.05.2013, 21:51

Задаете боди 100% и тогда родительский блок так сможет быть 100% (если значение не задается точным, в данном случае выступает окно браузера и по нему высчитывается)

Вот набросал

HTML5
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
<html>
<head>
<title>Демонстрация</title>
<style type="text/css">
body, html{
    margin:0;
    padding:0;
}
body{
    height:100%;
    width:100%;
}
#container {
    position: relative;
    height: 100%;
    width: 100%;
    }
#header {
    position: absolute;
    top:0px;
    height:20%;
    width:100%;
    background-color:green;
 
}
#content{
 
}
#footer {
    position:absolute;
    bottom:0; 
    height:20%;
    background-color:blue;
    width:100%;
    
 
}
</style>
</head>
<body>
    <div id="container">
        <div id="header">
        Демонстрация Хеадера
        </div>
        <div id="content">
        </div>
        <div id="footer">
        Демонстрация Футера
        </div>
    </div>
</body>
</html>

@[progeR] · 12.05.2013, 21:59 **[ТС]**

Спасибо,
для боди работает, а вот так нет))

HTML5
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
<html>
<head>
<title>Демонстрация</title>
<style type="text/css">
body, html{
    margin:0;
    padding:0;
}
body{
    height:100%;
    width:100%;
}
#container {
    position: relative;
    height: 100%;
    width: 100%;
    }
#header {
    position: absolute;
    top:0px;
    height:20%;
    width:100%;
    background-color:green;
 
}
#content{
 
}
#footer {
    position:absolute;
    bottom:0; 
    height:20%;
    background-color:blue;
    width:100%;
    
 
}
</style>
</head>
<body>
<table>
<tr>
<td>12345</td>
<td>
    <div id="container">
        <div id="header">
        Демонстрация Хеадера
        </div>
        <div id="content">
        </div>
        <div id="footer">
        Демонстрация Футера
        </div>
    </div>
</td>
</body>
</html>

display: block; что-то тоже не работает.

@Lovrentiy · 12.05.2013, 22:12

аа... эээ.. ооо.... зачем?! зачем вы пихаете блоки в таблицу?

Добавлено через 32 секунды
я не увидел и не понял, что у вас вся конструкция в виде таблицы.... А зачем?

@dolte · 12.05.2013, 22:12

Так ?

HTML5
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
<!doctype html>
<head>
<style>
body{width:100%; height:100%; margin:0 0 0 0;}
#parent{
width: 350px;
height: auto;
border: 1px solid black;
}
.child1{
width:350px;
height: 150px;
border: 1px solid blue;
}
table{
width: 350px;
margin: 20px 0;
height: auto;
border: 1px solid red;
}
.child2{
width: 350px;
height: 150px;
border: 1px solid green;
}
</style>
</head>
<body>
    <div id="parent">
        <div class="child1"></div>
        <table>
            <tr>
                <td>1</td><td>2</td>
            </tr>
            <tr>
                <td>4</td><td>3</td>
            </tr>
        </table>
        <div class="child2"></div>
    </div>
</body>
</html>

или я не понял, и это у вас херед контент и футер ?

тогда так

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!doctype html>
<head>
<style>
html, body {height: 100%;}
 
.wrap {min-height: 100%; border: 1px solid black;}
 
.content {padding-bottom: 150px; border: 1px solid green;}  
 
footer {position: relative;
    margin-top: -150px; 
    height: 150px;
    clear:both;
    border: 1px solid blue;} 
</style>
</head>
<body>
<div class="wrap">
    <header></header>
    <div class="content"></div>
</div>
<footer></footer>
</body>
</html>

что это у вас вообще такое, напишите подробнее

@Lovrentiy · 12.05.2013, 22:25

нууу.... вот вариант с использованием таблицы:

HTML5
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
<html>
<head>
<title>Демонстрация</title>
<style type="text/css">
body, html{
    margin:0;
    padding:0;
}
body{
    height:100%;
    width:100%;
}
.table {
    margin:0;
    padding:0;
    position: relative;
    height: 100%;
    width: 100%;
    }
#header {
    position: absolute;
    top:0px;
    height:150px;
    width:100%;
    background-color:green;
 
}
#content{
 
}
#footer {
    position:absolute;
    bottom:0; 
    height:150px;
    background-color:blue;
    width:100%;
    
 
}
</style>
</head>
<body>
    <table class="table">
        <tr>
            <td>
                <div id="header">
                Демонстрация Хеадера
                </div>
            </td>
        </tr>
        <tr>
            <td>
                <div id="content">
                </div>
            </td>
        </tr>
           <tr>
            <td>
                <div id="footer">
                Демонстрация Футера
                </div>
            </td>
        </tr>
        
    </table>
</body>
</html>

Но тут остаётся мини зазор, если честно не помню как фиксится...

@dolte · 12.05.2013, 22:31

мини зазор...слева чтоли ?

CSS
1
2
3
4
body, html{
    margin:-2;
    padding:0;
}

@[progeR] · 12.05.2013, 22:33 **[ТС]**

Таблицы рулят, ими гораздо удобнее верстать. Я же в первом посте на рисунке указал, что родительский элемент у меня - это ячейка таблицы.

@Lovrentiy · 12.05.2013, 22:38

Сообщение от [progeR]

Таблицы рулят, ими гораздо удобнее верстать. Я же в первом посте на рисунке указал, что родительский элемент у меня - это ячейка таблицы.

Не по теме:

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

Добавлено через 1 минуту

Сообщение от dolte

мини зазор...слева чтоли ?

CSS
1
2
3
4
body, html{
    margin:-2;
    padding:0;
}

Не по теме:

Не кошэрно.... Вообще, доработка маргинами это на крайний случай...

@[progeR] · 12.05.2013, 23:04 **[ТС]**

Сообщение от Lovrentiy

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

Да, в особенности, когда все время получается такая фигня:

Уже несколько часов бьюсь, чтобы нормально показывало. Охреневаю от этого html. Создание такого интерфейса в QtCreator занимает 5 минут; на этом фуфле, которое для этого предназначено - 5 часов.

@Lovrentiy · 12.05.2013, 23:07

Сообщение от [progeR]

Да, в особенности, когда все время получается такая фигня:

Не по теме:

А блоки тут не причем... это у верстальщика.... руки под программный код только заточены! =)

@[progeR] · 12.05.2013, 23:19 **[ТС]**

Хорошо, как тогда без применения таблиц (раз это прошлый век) сделать так как на картинке через ДИВы (мы же в 21 веке живем=)):
Часть кода уже представлена выше.

@[progeR] · 13.05.2013, 01:29 **[ТС]**

Вот, чтобы было понятнее (внешняя оранжевая рамка):

@Lovrentiy · 13.05.2013, 21:15

Не по теме:

повтор был

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615

	Как спозиционировать элементы по верху, по низу и по центру родителя? 12.05.2013, 19:44. Показов 2409. Ответов 19 Метки нет (Все метки) Добрый вечер. Помогите, как сделать такую разметку, как во вложении? Уж всякие позишены, дисплеи, топы и ботомы задавал, на выходе какой-то треш получается. Спасибо. Миниатюры 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	12.05.2013, 20:32 [ТС]
	Мне нужно позиционирование. На картинке же специально указал числа. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	12.05.2013, 20:44
	сделайте позиционирование абсолютное для верхнего дива top:0; для нижнего bottom:0; 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	12.05.2013, 21:09 [ТС]
	Делал, треш. При этом теряется выравнивание моего дива по центру родителя, также он ужимается до минимальных размеров, а нужно, чтобы занимал всю предоставленную ширину родителя. Размеров блоков не знаю. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	12.05.2013, 21:16
	ну дак и задайте ему ширину.... Для начала задайте ширину родителю, затем и детям 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	12.05.2013, 21:20 [ТС]
	Как задать? Попиксильно подогнать, чтобы все влезало? Это должно автоматически делаться. 0

@Lovrentiy 162 / 162 / 11 Регистрация: 07.09.2011 Сообщений: 995
	12.05.2013, 22:12
	аа... эээ.. ооо.... зачем?! зачем вы пихаете блоки в таблицу? Добавлено через 32 секунды я не увидел и не понял, что у вас вся конструкция в виде таблицы.... А зачем? 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	12.05.2013, 22:33 [ТС]
	Таблицы рулят, ими гораздо удобнее верстать. Я же в первом посте на рисунке указал, что родительский элемент у меня - это ячейка таблицы. 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	12.05.2013, 23:19 [ТС]
	Хорошо, как тогда без применения таблиц (раз это прошлый век) сделать так как на картинке через ДИВы (мы же в 21 веке живем=)): Часть кода уже представлена выше. Миниатюры 0

@[progeR] 30 / 8 / 2 Регистрация: 20.08.2011 Сообщений: 615
	13.05.2013, 01:29 [ТС]
	Вот, чтобы было понятнее (внешняя оранжевая рамка): Миниатюры 0

@Lovrentiy
	13.05.2013, 21:15
	Не по теме: повтор был 0