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

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

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

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

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

Ответ
 
Опции темы Поиск в этой теме
Старый 27.02.2017, 23:47   #1
den4ik_
Новичок
Джуниор
 
Регистрация: 27.02.2017
Сообщений: 2
По умолчанию Margin inside div and responsive height

Здравствуйте уважаемые форумчане.

Есть такой пример кода https://jsfiddle.net/wodgtsdd/

Вопрос 1: Как сделать чтобы div class="content-wrapper" растягивался по высоте документа (т.е. доставал до нижнего края документа)? Сейчас он растягивается по высоте содержимого в нем контента. Я предполагаю что это можно сделать с помощью js типа получить высоту документа, получить координаты и высоту блока content-wrapper, и вычесть из высоты документа координату левого верхнего угла + высоту блока, а затем сложить полученную величину с высотой блока. Но можно ли это сделать с помощью css? Почему то мне кажется что с помощью css было бы правильнее.

Вопрос 2: Почему параграф lorum ipsum который имеет свойства margin-top и margin-bottom 15 px вылезает своими отступами за пределы div блока, и как правильно это исправить, т.е. сделать так чтобы не вылезал?

Спасибо за внимание
den4ik_ вне форума Ответить с цитированием
Старый 28.02.2017, 10:14   #2
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

1. Натянуть через flex-box.
2. Схлапывание отступов. Вариантов дофига:
2.0. Боксы флекса не участвуют в схлапывании отступов. Так что если сделать 1, то дальнейшее не понадобится.
2.1. Внешнему блоку можно задать границу или поля, хотя бы в 1 пиксель.
2.2. Сделать его inline-block/overflow: hidden
2.3. Переделать отступы на поля, но не будет схлапывания у сиблингов, а в этом весь сок фичи.
2.4. Вырвать блок из потока через absolute/fixed.
2.5. Плавающие элементы тоже не участвуют в схлапывании.
2.6. display: table тоже
короче дофига вариантов
Alar, верни репу!
Naive вне форума Ответить с цитированием
Старый 28.02.2017, 15:34   #3
den4ik_
Новичок
Джуниор
 
Регистрация: 27.02.2017
Сообщений: 2
По умолчанию

1. согласен
2.7. добавить к блоку content-wrapper свойство overflow-y: auto
den4ik_ вне форума Ответить с цитированием
Старый 01.03.2017, 08:20   #4
Naive
Раздолбайских Дел
Старожил
 
Аватар для Naive
 
Регистрация: 22.05.2009
Сообщений: 3,828
По умолчанию

2.7. да, одна фигня с 2.2, блок будеть замыкаться на себя
Alar, верни репу!
Naive вне форума Ответить с цитированием
Ответ


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

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по responsive вёрстке Bender1000 HTML и CSS 0 24.07.2015 14:44
CSS (3) div height 100% не работает в Opera Lime HTML и CSS 4 07.08.2013 19:58
Не изменяет свою высоту DIV с указанным min-height RelaX Inc. HTML и CSS 5 19.07.2012 14:40
Проблема height в теге div moshkin_ura HTML и CSS 6 26.09.2011 20:16
Div - динамическая высота (height) DNCH HTML и CSS 4 27.09.2010 22:48