Форум программистов
 

Восстановите пароль или Зарегистрируйтесь на форуме, о проблемах и с заказом рекламы пишите сюда - alarforum@yandex.ru, проверяйте папку спам!

Вернуться   Форум программистов > Web программирование > HTML и CSS
Регистрация

Восстановить пароль
Повторная активизация e-mail

Купить рекламу на форуме - 42 тыс руб за месяц

Ответ
 
Опции темы Поиск в этой теме
Старый 09.12.2015, 12:53   #1
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 50
По умолчанию Почему работает именно так

Нашел в интернете статью по резиновой верстке. Изучил, но не понял как работают основные два приема. В связи с этим вопросы:
1. В otstup футер прижат к низу за счет того, что центральная часть имеет размер 100%. Но зачем, чтобы она сохраняла эти значения, необходимо у HTML и body указать height 100%?
2. Во втором примере у тега main есть отступы на размер сайдбаров, и он обернут в тег mainwrap. За пределы последнего вынесены два сайдбара. Но как получается, что они стоят выше своего положения, и проходя сквозь mainwrap, встают на приготовленные для них места?
Заранее спасибо.
Вложения
Тип файла: rar Otstup.rar (968 байт, 13 просмотров)
Тип файла: rar Sidebar.rar (1,000 байт, 11 просмотров)
AlexKain вне форума Ответить с цитированием
Старый 15.12.2015, 01:23   #2
Gxxx28
 
Регистрация: 18.10.2013
Сообщений: 8
По умолчанию

1.
#wrapper { position: relative; height: 100%; } Див враппер имеет высоту в 100% тоесть во весь экран. после него идет футер , тоесть футэра не должно быть видно но и за footer { margin: -100px auto 0;} он поднимается на 100пкс вверх , ровно 100px и есть его высота height:100px;. У HTML и body не надо ничего указывать ...
Wrapper и есть корпус сатраницы;
Gxxx28 вне форума Ответить с цитированием
Старый 15.12.2015, 01:41   #3
Gxxx28
 
Регистрация: 18.10.2013
Сообщений: 8
По умолчанию

2. Все это благодаря float:left; и margin-left:-100%; для левого саидбара можно поставить и -50% -70% и посмотришь как работает.
А для правого: float: left; margin-left: -240px;
Так работает флоат как бы объединяет их но уже с помошью марджин ставишь куда надо.
Gxxx28 вне форума Ответить с цитированием
Старый 17.12.2015, 22:36   #4
AlexKain
Пользователь
 
Регистрация: 25.09.2015
Сообщений: 50
По умолчанию

Цитата:
Сообщение от Gxxx28 Посмотреть сообщение
1.
#wrapper { position: relative; height: 100%; } Див враппер имеет высоту в 100% тоесть во весь экран. после него идет футер , тоесть футэра не должно быть видно но и за footer { margin: -100px auto 0;} он поднимается на 100пкс вверх , ровно 100px и есть его высота height:100px;. У HTML и body не надо ничего указывать ...
Wrapper и есть корпус сатраницы;
Спасибо, но если убрать height у html и body, а высоту враппера указать в процентах, то он моментально схлопывается. Но я, кажется, здесь уже понял сам: процент берется от высоты родителя, по умолчанию height = auto, т.е. высота только по содержимому, а свободное место равно 0. А 100% от 0 - ноль. Потому и не работает.
А вот за объяснение ко второму - огромная благодарность, сам не доехал
AlexKain вне форума Ответить с цитированием
Ответ


Купить рекламу на форуме - 42 тыс руб за месяц

Опции темы Поиск в этой теме
Поиск в этой теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Почему так работает? Hall Общие вопросы C/C++ 15 26.01.2012 00:02
Функция на Си, как именно она работает Алексей Денисов Помощь студентам 3 13.11.2011 20:16
Почему не работает программа, что не так? Демик Паскаль, Turbo Pascal, PascalABC.NET 9 17.07.2011 21:12
Почему так медленно работает цикл? zotox Общие вопросы C/C++ 3 09.01.2011 23:57
Реально ли написать чат именно так? Dr.MagoR Общие вопросы Delphi 3 12.04.2009 00:38