Правильное использование высоты

@Eduardo_1992 · Регистрация: 08.05.2015

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

Всем привет!
Свертал макет страницы. Всё ОК, кроме расположения футера. Дело в том, что у него стоит фиксированная ширина. И при изменении количества товаров, он остаётся на своём месте. А может быть даже так, что получится каша из футера и товаров. Подскажите, пожалуйста, как это исправить? У меня всегда были проблемы с позиционированием блоков... Для удобства скину все файлы.
Спасибо огромное!!!

@Максим_М21 · 12.10.2015, 16:30

- Слишком часто используешь всякие отступы - пиши с "float:", и в конце где не хватает - "margin, left...".
- Сформируй прежде всего основной блок, куда залей все (подвал выпал из основного блока).
- Зачем тебе position:absolute в каждом блоке? Эти элементы живут своей жизнью и отталкиваются от границ монитора, а должны от оболочки в которую помещены.
- Не задавай точной высоты блока в котором меняется наполнение.
- class="head" у двух разных элементов один тот же....

@Eduardo_1992 · 12.10.2015, 16:41 **[ТС]**

Максим_М21, без position: absolute не получалось сделать нужное позиционирование. А точное значение высоты блока задавал из-за того, что он у меня был как бы сплюснут, как-будто в нём ни чего нет. Это было видно, когда задавал свойство border в 1px, там получалась жирная полоска в 2px, т. е. border-top и border-bottom находились как бы рядом друг с другом. Хотя в нём была информация. Приходилось задавать высоту, тогда границы расширялись и всё выглядело нормально. А теперь вот вылезла проблема с высотой...

@Максим_М21 · 12.10.2015, 17:56

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

А точное значение высоты блока задавал из-за того, что он у меня был как бы сплюснут

float:left - обтекание блока

HTML5
1
2
3
4
5
6
7
8
9
10
11
<div class="container">
    <div class="head">
        <div class="head_logo"></div>
        <div class="head_menu"></div>       
    </div>
    <div class="bod">
        <div class="left_panel"></div>
        <div class="right_panel"></div>     
    </div>
    <div class="footer"></div>
</div>

Делай без position:absolute и width:100%. Задай ширину основного блока примерно 950-1100px, и margin:0px auto;. Внутренние блоки пропиши с float:left, если есть несколько элементов, которые нужно объединить - занеси их в <div>.
Высоту задавай pading или margin.

@Eduardo_1992 · 13.10.2015, 08:35 **[ТС]**

Максим_М21, ОК, попробую.

@Eduardo_1992 · 14.10.2015, 15:43 **[ТС]**

Максим_М21, попробовал что-нибудь сделать с основным блоком. Он вообще не реагирует на изменение высоты. Я поставил ему значение height: 100% и поставил border, чтобы видеть его границы. Появилась линия посреди страницы. Таким образом, класс main_container вмещает в себе не все элементы, несмотря на то, что он является главным блоком. В нём есть как бы дыра...

Добавлено через 1 минуту
Максим_М21, убирал все значения position: absolute на relative (потом на inherit), кроме главного блока. Всё поплыло..

@Евгений Несмело · 15.10.2015, 11:00

Чтоб не плыло, если указываешь флоат, родителю задавай overflov:hidden
Помогает.
Если задаешь абсолютное позиционирование, родителю попробуй задать релатив. Помогает.

@Eduardo_1992 · 15.10.2015, 11:07 **[ТС]**

ОК.
А при создании главного контейнера, в котором будет всё содержание сайта со всеми блоками, картинками, таблицами и т. д., какие свойства лучше устанавливать?

CSS
1
2
3
4
5
6
     position: relative;
     top: 0px;
     left: 0px;
     width: 100%;
     margin: 0px;
     padding: 0px;

Так правильно будет?

@Евгений Несмело · 15.10.2015, 11:21

не совсем понял вопрос. Вот тут посмотри наглядный пример, если конечно поможет.
[del]

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

@Eduardo_1992 · 15.10.2015, 11:23 **[ТС]**

Евгений Несмело, спасибо за ссылку. Вроде то, что нужно. Попробую протестировать на своём примере.

@Taatshi · 15.10.2015, 12:32

Комментарий администратора

Евгений Несмело, у нас на форуме разрешены ссылки на сторонние сайты только в том случае, если по ссылке содержится КОНКРЕТНЫЙ ответ на КОНКРЕТНЫЙ вопрос ТС. Предупреждение.

@Eduardo_1992 · 15.10.2015, 12:35 **[ТС]**

Taatshi, эта ссылка - именно то, что нужно. Т. е., по ссылке содержится КОНКРЕТНЫЙ ответ на КОНКРЕТНЫЙ вопрос. Разблокируйте её.

@Fedor92 · 15.10.2015, 12:38

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

Зачем Вам ссылка?

@Eduardo_1992 · 15.10.2015, 12:40 **[ТС]**

Fedor92, это я понял. Но там был конкретный пример. Показано наглядно.

@Fedor92 · 15.10.2015, 12:43

Eduardo_1992, а что Вы не можете изменить свой шаблон без чужого примера... В Интернете миллионы таких сайтов зайдите на любой и смотрите...

Там в принципе и смотреть, то нечего - шаблон разбивается три области: шапка, футер, блок контента... Блок контента имеет свойство height:auto, футер и шапка фиксированную высоту... Для html и body задаёте min-height:100%...

@Eduardo_1992 · 15.10.2015, 12:49 **[ТС]**

Fedor92, да, но там это было намного проще и быстрее. Так как сразу написано именно то, что нужно. И не нужно лезть в исходный код и лазить по стилям на других сайтах. Мне, как новичку, так быстрее разобраться.

@Fedor92 · 15.10.2015, 12:54

Не по теме:

Eduardo_1992, а ну тогда определяйтесь Вы новичок, который хочет научится верстать на собственном опыте или просто копипастер...:) Если копипастер, то продолжайте требовать ссылку обратно - хотя её уже вряд ли вернут...:)

@Eduardo_1992 · 15.10.2015, 12:58 **[ТС]**

Fedor92, нет верстать копипастом мне не нужно. Мне нужно научиться верстать без косяков.

Тема закрыта.

@Максим_М21 · 15.10.2015, 16:24

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

position: relative;
* * *top: 0px;
* * *left: 0px;
* * *width: 100%;
* * *margin: 0px;
* * *padding: 0px;

Задай главному блоку

CSS
1
2
width: 1000px;
    margin: 0px auto;

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

@Eduardo_1992 · 15.10.2015, 16:28 **[ТС]**

Максим_М21, спасибо.

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@Максим_М21 5 / 4 / 2 Регистрация: 11.12.2013 Сообщений: 168
	12.10.2015, 16:30
	- Слишком часто используешь всякие отступы - пиши с "float:", и в конце где не хватает - "margin, left...". - Сформируй прежде всего основной блок, куда залей все (подвал выпал из основного блока). - Зачем тебе position:absolute в каждом блоке? Эти элементы живут своей жизнью и отталкиваются от границ монитора, а должны от оболочки в которую помещены. - Не задавай точной высоты блока в котором меняется наполнение. - class="head" у двух разных элементов один тот же.... 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	12.10.2015, 16:41 [ТС]
	Максим_М21, без position: absolute не получалось сделать нужное позиционирование. А точное значение высоты блока задавал из-за того, что он у меня был как бы сплюснут, как-будто в нём ни чего нет. Это было видно, когда задавал свойство border в 1px, там получалась жирная полоска в 2px, т. е. border-top и border-bottom находились как бы рядом друг с другом. Хотя в нём была информация. Приходилось задавать высоту, тогда границы расширялись и всё выглядело нормально. А теперь вот вылезла проблема с высотой... 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	13.10.2015, 08:35 [ТС]
	Максим_М21, ОК, попробую. 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	14.10.2015, 15:43 [ТС]
	Максим_М21, попробовал что-нибудь сделать с основным блоком. Он вообще не реагирует на изменение высоты. Я поставил ему значение height: 100% и поставил border, чтобы видеть его границы. Появилась линия посреди страницы. Таким образом, класс main_container вмещает в себе не все элементы, несмотря на то, что он является главным блоком. В нём есть как бы дыра... Добавлено через 1 минуту Максим_М21, убирал все значения position: absolute на relative (потом на inherit), кроме главного блока. Всё поплыло.. 0

@Евгений Несмело 0 / 0 / 0 Регистрация: 14.10.2015 Сообщений: 11
	15.10.2015, 11:00
	Чтоб не плыло, если указываешь флоат, родителю задавай overflov:hidden Помогает. Если задаешь абсолютное позиционирование, родителю попробуй задать релатив. Помогает. 0

@Евгений Несмело 0 / 0 / 0 Регистрация: 14.10.2015 Сообщений: 11
	15.10.2015, 11:21
	не совсем понял вопрос. Вот тут посмотри наглядный пример, если конечно поможет. [del] Изначально заключи весь код в один главный блок. задаешь ширину и маргин. Позиционирование там точно лишнее, если я тебя правильно понял. 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 11:23 [ТС]
	Евгений Несмело, спасибо за ссылку. Вроде то, что нужно. Попробую протестировать на своём примере. 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 12:35 [ТС]
	Taatshi, эта ссылка - именно то, что нужно. Т. е., по ссылке содержится КОНКРЕТНЫЙ ответ на КОНКРЕТНЫЙ вопрос. Разблокируйте её. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2015, 12:38
	Eduardo_1992, на Ваш вопрос ответ один: не надо злоупотреблять абсолютным позиционированием при вёрстке макета, а также использовать чрезмерно большие отступы... Вот и всё... Зачем Вам ссылка? 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 12:40 [ТС]
	Fedor92, это я понял. Но там был конкретный пример. Показано наглядно. 0

@Fedor92 2964 / 2621 / 1068 Регистрация: 15.12.2012 Сообщений: 10,091 Записей в блоге: 11
	15.10.2015, 12:43
	Eduardo_1992, а что Вы не можете изменить свой шаблон без чужого примера... В Интернете миллионы таких сайтов зайдите на любой и смотрите... Там в принципе и смотреть, то нечего - шаблон разбивается три области: шапка, футер, блок контента... Блок контента имеет свойство height:auto, футер и шапка фиксированную высоту... Для html и body задаёте min-height:100%... 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 12:49 [ТС]
	Fedor92, да, но там это было намного проще и быстрее. Так как сразу написано именно то, что нужно. И не нужно лезть в исходный код и лазить по стилям на других сайтах. Мне, как новичку, так быстрее разобраться. 0

@Fedor92
	15.10.2015, 12:54
	Не по теме: Eduardo_1992, а ну тогда определяйтесь Вы новичок, который хочет научится верстать на собственном опыте или просто копипастер...:) Если копипастер, то продолжайте требовать ссылку обратно - хотя её уже вряд ли вернут...:) 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 12:58 [ТС]
	Fedor92, нет верстать копипастом мне не нужно. Мне нужно научиться верстать без косяков. Тема закрыта. 0

@Eduardo_1992 7 / 8 / 5 Регистрация: 08.05.2015 Сообщений: 477
	15.10.2015, 16:28 [ТС]
	Максим_М21, спасибо. 0