ShopForBux.com
Всё обо всём

Выравнивание блоков в css (height)

97 32
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9542
Добрый день, очень нужна ваша помощь, не смог найти решение.
Нужен сайт:
шапка - резиновая, в зависимости от контента (проблем нет)
футер - прижатый к низу экрана
и центральная часть состоящая из левого сайдбара и области контента на всю высоту. Все бы ничего но, при установке height:100%; появляется огромная проблема.
Сайдбар и контент съезжают ниже футера ровно на то расстояние, какое занимает шапка сайта. Пробовал разные методы, но так и не смог найти решение этой тупой проблемы. Заранее благодарен за каждый ответ!!!!!!!!!
user avatar
Пользователь
На сайте 14 лет
Сообщений : 402
Репутация : 0
9 лет назад #9543
ZION,
покажи код по возможности на https://jsfiddle.net/
а то каждый по разному верстает, мы же не знаем каким ты методом делал
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9544
gemiks,
https://jsfiddle.net/mgubgama/
Но это я уже изменял с того момента, сейчас там футер внизу норм, и шапка норм) А вот контейнер без высоты не работает)) вроде как пустой, а нужно заполнить все оставшееся пространство. Я уже просто давно не занимался версткой и теперь вообще не помню как раньше решал такие проблемы)))

И кстати, сайдбар(меню) что-то не получается отцентрировать по вертикали, может все же из-за этой высоты, хотя не знаю.
user avatar
Пользователь
На сайте 15 лет
Сообщений : 663
Репутация : 0
9 лет назад #9545
Есть изображение как должно выглядеть в конечном счёте всё? Зачем делаешь position:absolute/relative?
user avatar
Пользователь
На сайте 15 лет
Сообщений : 858
Репутация : 0
9 лет назад #9546
ZION, во, вроде вспомнил, если мне память не изменяет, то пропиши min-height, к примеру 300px
min-height:300px;

[attachment=3500]


Контейнер не должен вылазить за пределы футера и наезжать на футор, если наезжает на футор, то задай z-index
подбери нужный min-height для всех страниц

P.S. STUDIO GO PRESENTS, а Претор с Форсем - Сосунс \":am:\"
user avatar
Пользователь
На сайте 13 лет
Сообщений : 1859
Репутация : 0
9 лет назад #9547
ByFly,
пфф придурок а ты знал что в ксс есть оператор который указывает приоритет верхнего слоя? даже если футер и вылазит, на тех футера накладываем приоритет верхнего или нижнего слоя в зависимости что вылазит, и з-индекс нах не нужен. ))) Ну ты канешно молодец, ты математичиский расчет сделал, вывел 10 цыклов за 0.0007 сек, ты крут да! так держать

Цитата: ByFly
P.S. STUDIO PONOS PRESENTS

\":lol:\"
user avatar
Пользователь
На сайте 15 лет
Сообщений : 858
Репутация : 0
9 лет назад #9548
Pretorian, ну, начнем с того, что ты свой вариант решение не предложил, следовательно, ты тут единственный пустозвон и пустослов \":lol:\"

P.S. ах да, я же забыл, у тебя нет мозгов, ты думать не умеешь \":lol:\"
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9549
Цитата: ByFly
Контейнер не должен вылазить за пределы футера и наезжать на футор, если наезжает на футор, то задай z-index
подбери нужный min-height для всех страниц

В том то и прикол, что контейнер не просто залазит на футер, он еще на пикселей 100 (зависит от шапки) смещается ниже, то есть выпадает из тегов htnl,body
Цитата: ByFly
во, вроде вспомнил, если мне память не изменяет, то пропиши min-height, к примеру 300px
min-height:300px;


Чему именно прописать min-height?

Я не знаю, может кто подскажет статью где будет описано как сверстать макет такого типа? Или подскажите пожалуйста как правильно указать стили для правильного результата))
user avatar
Пользователь
На сайте 15 лет
Сообщений : 663
Репутация : 0
9 лет назад #9550
ZION,
ты бы нарисовал что хочешь получить для начала, хотя бы каркас
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9551
steam,
user avatar
Пользователь
На сайте 15 лет
Сообщений : 22
Репутация : 0
9 лет назад #9553
ZION,
с height 100vh и flexbox не вариант заюзать?
P.S. не втирайте про поддержку флекса, сейчас она везде, да и с префиксами на старых норм
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9554
Цитата: Paul95
с height 100vh

не помогает
Цитата: Paul95
flexbox не вариант заюзать?

честно говоря никогда не делал. Есть пример?

НЕУЖЕЛИ НИКТО НЕ МОЖЕТ РЕШИТЬ ДАННУЮ ПРОБЛЕМУ?
user avatar
Пользователь
На сайте 15 лет
Сообщений : 22
Репутация : 0
9 лет назад #9555
ZION,
ну почитай http://frontender.info/a-guide-to-flexbox/
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9556
Paul95,
Я так понял, если использовать эту технологию, то тогда весь сайт придется писать так? Или можно с помощью этого просто выставить блоки?
user avatar
Пользователь
На сайте 15 лет
Сообщений : 22
Репутация : 0
9 лет назад #9557
ZION, не обязательно весь сайт
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9558
Paul95,
не могли бы пожалуйста показать пример, как можно решить мою проблему на простых блоках. Все равно не могу понять как реализовать. А проблема реально перечеркивает реализацию всего сайта(( Заранее очень благодарен!
user avatar
Пользователь
На сайте 13 лет
Сообщений : 251
Репутация : 0
9 лет назад #9559

ZION

в футере вместо absolut постав fixed
user avatar
Пользователь
На сайте 15 лет
Сообщений : 50
Репутация : 0
9 лет назад #9560
MARIOS,
Это не решает вопрос высоты((
user avatar
Пользователь
На сайте 15 лет
Сообщений : 663
Репутация : 0
9 лет назад #9561
ZION,
Адаптивность нужна?

Первым в коде прописываешь меню, задай ему ширину, флоут налево, затем так же с контентом флоут налево, в футере делаешь clear. Ты сейчас сделал через позишн но сначала задал абсолют а потом релатив, сделай наоборот. Тому что позиционируешь задай абсолют.
user avatar
Пользователь
На сайте 13 лет
Сообщений : 1859
Репутация : 0
9 лет назад #9562
самое простое и быстрое решение без адаптаций и прочих сложностей это приминение к контейнеру, тега
цыфру количества пикселей уже сам коректируй, top это отступ от верха, bottom отступ от низа.
Более подробно: margin | htmlbook.ru

это самый простой способ розместить обект/контейнур на высоте которой нужно, без постройки шаблона и оптимизаторов итд.
Автор темы
author avatar
ZION
Пользователь
На сайте 15 лет
Сообщений 50
Тем 12
Репутация 0
Теги темы
Автор не добавил тегов для этой темы
Ответить
Написал(а):