Форум программистов  
Контакты: о проблемах с регистрацией, почтой и по другим вопросам пишите сюда - alarforum@yandex.ru, проверяйте папку спам! Обязательно пройдите активизацию e-mail.

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

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

Ответ
 
Опции темы
Старый 28.02.2017, 00:47   #1
den4ik_
Новичок
 
Регистрация: 28.02.2017
Сообщений: 2
Репутация: 10
По умолчанию 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, 11:14   #2
Naive
Раздолбайских Дел
Профессионал
 
Аватар для Naive
 
Регистрация: 22.05.2009
Адрес: Екатеринбург
Сообщений: 3,583
Репутация: 1842
По умолчанию

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 тоже
короче дофига вариантов
__________________
ridero.ru — создайте настоящую книгу
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Старый 28.02.2017, 16:34   #3
den4ik_
Новичок
 
Регистрация: 28.02.2017
Сообщений: 2
Репутация: 10
По умолчанию

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

2.7. да, одна фигня с 2.2, блок будеть замыкаться на себя
__________________
ridero.ru — создайте настоящую книгу
Жду ваши искренние спасибы на яндекс-кошелек: 410011068154587
Naive вне форума   Ответить с цитированием
Ответ



Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.

Быстрый переход

Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Вопрос по responsive вёрстке Bender1000 HTML и CSS 0 24.07.2015 15: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




11:31.


Powered by vBulletin® Version 3.8.8 Beta 2
Copyright ©2000 - 2017, Jelsoft Enterprises Ltd.

купить трафик


как улучшить посещаемость, а также решения по монетизации сайтов, видео и приложений

RusProfile.ru


Справочник российских юридических лиц и организаций.
Проекты отопления, пеллетные котлы, бойлеры, радиаторы
интернет магазин respective.ru