Всё обо всём

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

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

И кстати, сайдбар(меню) что-то не получается отцентрировать по вертикали, может все же из-за этой высоты, хотя не знаю.
user avatar
Пользователь
На сайте 15 лет
Сообщений : 663
Репутация : 0
9 лет назад
Есть изображение как должно выглядеть в конечном счёте всё? Зачем делаешь position:absolute/relative?
user avatar
Пользователь
На сайте 15 лет
Сообщений : 858
Репутация : 0
9 лет назад
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 лет назад
ByFly,
пфф придурок а ты знал что в ксс есть оператор который указывает приоритет верхнего слоя? даже если футер и вылазит, на тех футера накладываем приоритет верхнего или нижнего слоя в зависимости что вылазит, и з-индекс нах не нужен. ))) Ну ты канешно молодец, ты математичиский расчет сделал, вывел 10 цыклов за 0.0007 сек, ты крут да! так держать

Цитата: ByFlyP.S. STUDIO PONOS PRESENTS
:lol:
user avatar
Пользователь
На сайте 15 лет
Сообщений : 858
Репутация : 0
9 лет назад
Pretorian, ну, начнем с того, что ты свой вариант решение не предложил, следовательно, ты тут единственный пустозвон и пустослов :lol:

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

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


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

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

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

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

Первым в коде прописываешь меню, задай ему ширину, флоут налево, затем так же с контентом флоут налево, в футере делаешь clear. Ты сейчас сделал через позишн но сначала задал абсолют а потом релатив, сделай наоборот. Тому что позиционируешь задай абсолют.
user avatar
Пользователь
На сайте 13 лет
Сообщений : 1859
Репутация : 0
9 лет назад
самое простое и быстрое решение без адаптаций и прочих сложностей это приминение к контейнеру, тега
Автор темы
author avatar
ZION
Пользователь
На сайте 14 лет
Сообщений 50
Тем 12
Репутация 0
Теги темы
Автор не добавил тегов для этой темы
Ответить
Написал(а):