Всё обо всём
Выравнивание блоков в css (height)
11
32
9 лет назад
Добрый день, очень нужна ваша помощь, не смог найти решение.
Нужен сайт:
шапка - резиновая, в зависимости от контента (проблем нет)
футер - прижатый к низу экрана
и центральная часть состоящая из левого сайдбара и области контента на всю высоту. Все бы ничего но, при установке height:100%; появляется огромная проблема.
Сайдбар и контент съезжают ниже футера ровно на то расстояние, какое занимает шапка сайта. Пробовал разные методы, но так и не смог найти решение этой тупой проблемы. Заранее благодарен за каждый ответ!!!!!!!!!
Нужен сайт:
шапка - резиновая, в зависимости от контента (проблем нет)
футер - прижатый к низу экрана
и центральная часть состоящая из левого сайдбара и области контента на всю высоту. Все бы ничего но, при установке height:100%; появляется огромная проблема.
Сайдбар и контент съезжают ниже футера ровно на то расстояние, какое занимает шапка сайта. Пробовал разные методы, но так и не смог найти решение этой тупой проблемы. Заранее благодарен за каждый ответ!!!!!!!!!
9 лет назад
ZION,
покажи код по возможности на https://jsfiddle.net/
а то каждый по разному верстает, мы же не знаем каким ты методом делал
покажи код по возможности на https://jsfiddle.net/
а то каждый по разному верстает, мы же не знаем каким ты методом делал
9 лет назад
gemiks,
https://jsfiddle.net/mgubgama/
Но это я уже изменял с того момента, сейчас там футер внизу норм, и шапка норм) А вот контейнер без высоты не работает)) вроде как пустой, а нужно заполнить все оставшееся пространство. Я уже просто давно не занимался версткой и теперь вообще не помню как раньше решал такие проблемы)))
И кстати, сайдбар(меню) что-то не получается отцентрировать по вертикали, может все же из-за этой высоты, хотя не знаю.
https://jsfiddle.net/mgubgama/
Но это я уже изменял с того момента, сейчас там футер внизу норм, и шапка норм) А вот контейнер без высоты не работает)) вроде как пустой, а нужно заполнить все оставшееся пространство. Я уже просто давно не занимался версткой и теперь вообще не помню как раньше решал такие проблемы)))
И кстати, сайдбар(меню) что-то не получается отцентрировать по вертикали, может все же из-за этой высоты, хотя не знаю.
9 лет назад
Есть изображение как должно выглядеть в конечном счёте всё? Зачем делаешь position:absolute/relative?
9 лет назад
ZION, во, вроде вспомнил, если мне память не изменяет, то пропиши min-height, к примеру 300px
min-height:300px;
[attachment=3500]
Контейнер не должен вылазить за пределы футера и наезжать на футор, если наезжает на футор, то задай z-index
подбери нужный min-height для всех страниц
P.S. STUDIO GO PRESENTS, а Претор с Форсем - Сосунс![\":am:\"](\"https://sfb.su/engine/data/emoticons/am.gif\")
min-height:300px;
[attachment=3500]
Контейнер не должен вылазить за пределы футера и наезжать на футор, если наезжает на футор, то задай z-index
подбери нужный min-height для всех страниц
P.S. STUDIO GO PRESENTS, а Претор с Форсем - Сосунс
9 лет назад
ByFly,
пфф придурок а ты знал что в ксс есть оператор который указывает приоритет верхнего слоя? даже если футер и вылазит, на тех футера накладываем приоритет верхнего или нижнего слоя в зависимости что вылазит, и з-индекс нах не нужен. ))) Ну ты канешно молодец, ты математичиский расчет сделал, вывел 10 цыклов за 0.0007 сек, ты крут да! так держать
Цитата: ByFlyP.S. STUDIO PONOS PRESENTS
![\":lol:\"](\"https://sfb.su/engine/data/emoticons/lol.gif\")
пфф придурок а ты знал что в ксс есть оператор который указывает приоритет верхнего слоя? даже если футер и вылазит, на тех футера накладываем приоритет верхнего или нижнего слоя в зависимости что вылазит, и з-индекс нах не нужен. ))) Ну ты канешно молодец, ты математичиский расчет сделал, вывел 10 цыклов за 0.0007 сек, ты крут да! так держать
Цитата: ByFlyP.S. STUDIO PONOS PRESENTS
9 лет назад
Pretorian, ну, начнем с того, что ты свой вариант решение не предложил, следовательно, ты тут единственный пустозвон и пустослов
P.S. ах да, я же забыл, у тебя нет мозгов, ты думать не умеешь
P.S. ах да, я же забыл, у тебя нет мозгов, ты думать не умеешь
9 лет назад
Цитата: ByFlyКонтейнер не должен вылазить за пределы футера и наезжать на футор, если наезжает на футор, то задай z-index
подбери нужный min-height для всех страниц
В том то и прикол, что контейнер не просто залазит на футер, он еще на пикселей 100 (зависит от шапки) смещается ниже, то есть выпадает из тегов htnl,body
Цитата: ByFlyво, вроде вспомнил, если мне память не изменяет, то пропиши min-height, к примеру 300px
min-height:300px;
Чему именно прописать min-height?
Я не знаю, может кто подскажет статью где будет описано как сверстать макет такого типа? Или подскажите пожалуйста как правильно указать стили для правильного результата))
подбери нужный min-height для всех страниц
В том то и прикол, что контейнер не просто залазит на футер, он еще на пикселей 100 (зависит от шапки) смещается ниже, то есть выпадает из тегов htnl,body
Цитата: ByFlyво, вроде вспомнил, если мне память не изменяет, то пропиши min-height, к примеру 300px
min-height:300px;
Чему именно прописать min-height?
Я не знаю, может кто подскажет статью где будет описано как сверстать макет такого типа? Или подскажите пожалуйста как правильно указать стили для правильного результата))
9 лет назад
ZION,
ты бы нарисовал что хочешь получить для начала, хотя бы каркас
ты бы нарисовал что хочешь получить для начала, хотя бы каркас
9 лет назад
steam,
9 лет назад
ZION,
с height 100vh и flexbox не вариант заюзать?
P.S. не втирайте про поддержку флекса, сейчас она везде, да и с префиксами на старых норм
с height 100vh и flexbox не вариант заюзать?
P.S. не втирайте про поддержку флекса, сейчас она везде, да и с префиксами на старых норм
9 лет назад
Цитата: Paul95с height 100vh
не помогает
Цитата: Paul95flexbox не вариант заюзать?
честно говоря никогда не делал. Есть пример?
НЕУЖЕЛИ НИКТО НЕ МОЖЕТ РЕШИТЬ ДАННУЮ ПРОБЛЕМУ?
не помогает
Цитата: Paul95flexbox не вариант заюзать?
честно говоря никогда не делал. Есть пример?
НЕУЖЕЛИ НИКТО НЕ МОЖЕТ РЕШИТЬ ДАННУЮ ПРОБЛЕМУ?
9 лет назад
ZION,
ну почитай http://frontender.info/a-guide-to-flexbox/
ну почитай http://frontender.info/a-guide-to-flexbox/
9 лет назад
Paul95,
Я так понял, если использовать эту технологию, то тогда весь сайт придется писать так? Или можно с помощью этого просто выставить блоки?
Я так понял, если использовать эту технологию, то тогда весь сайт придется писать так? Или можно с помощью этого просто выставить блоки?
9 лет назад
ZION, не обязательно весь сайт
9 лет назад
Paul95,
не могли бы пожалуйста показать пример, как можно решить мою проблему на простых блоках. Все равно не могу понять как реализовать. А проблема реально перечеркивает реализацию всего сайта(( Заранее очень благодарен!
не могли бы пожалуйста показать пример, как можно решить мою проблему на простых блоках. Все равно не могу понять как реализовать. А проблема реально перечеркивает реализацию всего сайта(( Заранее очень благодарен!
9 лет назад
ZION
в футере вместо absolut постав fixed
9 лет назад
MARIOS,
Это не решает вопрос высоты((
Это не решает вопрос высоты((
9 лет назад
ZION,
Адаптивность нужна?
Первым в коде прописываешь меню, задай ему ширину, флоут налево, затем так же с контентом флоут налево, в футере делаешь clear. Ты сейчас сделал через позишн но сначала задал абсолют а потом релатив, сделай наоборот. Тому что позиционируешь задай абсолют.
Адаптивность нужна?
Первым в коде прописываешь меню, задай ему ширину, флоут налево, затем так же с контентом флоут налево, в футере делаешь clear. Ты сейчас сделал через позишн но сначала задал абсолют а потом релатив, сделай наоборот. Тому что позиционируешь задай абсолют.
9 лет назад
самое простое и быстрое решение без адаптаций и прочих сложностей это приминение к контейнеру, тега <div а в нем прописать стиль с приминением корекции отступа путем maigin-top: / margin-bottom: 100px;
цыфру количества пикселей уже сам коректируй, top это отступ от верха, bottom отступ от низа.
Более подробно: margin | htmlbook.ru
это самый простой способ розместить обект/контейнур на высоте которой нужно, без постройки шаблона и оптимизаторов итд.
цыфру количества пикселей уже сам коректируй, top это отступ от верха, bottom отступ от низа.
Более подробно: margin | htmlbook.ru
это самый простой способ розместить обект/контейнур на высоте которой нужно, без постройки шаблона и оптимизаторов итд.