X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость (

| Вход | Регистрация )

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Растянуть центральный блок.
lensoy
lensoy
Topic Starter сообщение 20.5.2012, 22:08; Ответить: lensoy
Сообщение #1


[IMG]http://i.imgur.com/BQ5Lx.jpg[/IMG]

[IMG]http://i.imgur.com/jvDSs.jpg[/IMG] [IMG]http://i.imgur.com/FEfNM.jpg[/IMG]
Ситуация не такая простая, как может показаться на первый взгляд.
Есть нижний блок и верхний с фиксированной высотой. Центральный блок растягивается на всю оставшуюся длину.
Сложность в том, что этот центральный блок может быть как пустым. Так и наполненным элементами, в следствии чего может стать длиннее чем чем высота экрана. И только во втором случае должна появится полоса прокрутки.

Вот небольшая анимация для наглядности.
http://ec-dom.ru/show.php

Если быть честным, то все примитивно просто. И казалось бы самая обычная задача. Но никак не выходит реализовать.
Вся сложность в том, что центральный блок может быть совсем пустым. И в таком случае нужно чтобы нижний блок был прижат к низу.
Если сделать например так: style='position:absolute;botton:0px;'
То когда центральный блок будет очень высоким, то нижний блок зависнет в воздухе и будет тупо поверх центрального парить, и не реагировать на полосу прокрутки. А нужно чтобы было, напоминаю, как на анимации сверху.

Вот несколько вариантов как НЕ ДОЛЖНО быть
http://ec-dom.ru/fail.php?n=1
http://ec-dom.ru/fail.php?n=2
http://ec-dom.ru/fail.php?n=3
http://ec-dom.ru/fail.php?n=4
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 20.5.2012, 23:12; Ответить: Muxa_hb
Сообщение #2


что то я не понял в чем разница между тем как должно быть и третьим вариантом как не должно быть :blink:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 20.5.2012, 23:22; Ответить: Muxa_hb
Сообщение #3


если я правильно понял - то вам нужно обернуть все в еще один блок и для него прописать overflow: auto;
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 20.5.2012, 23:24; Ответить: lensoy
Сообщение #4


(Muxa_hb @ 21.5.2012, 02:12) *
что то я не понял в чем разница между тем как должно быть и третьим вариантом как не должно быть :blink:


Смотрите внимательно. Когда центральный блок пустой, он растягивается так, что нижний блок прижат к низу. А в третьем ошибочном варианте, если средний блок пустой, то его и нет вообще. А если и в нем что-то есть, то средний блок принимает максимально маленькую прощать, чтобы только обхватить находящиеся в нем элементы.

*З.Ы. 3 неправильный вариант начинает работать правильно только тогда, когда забит элементами и становится длиннее экрана.
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 20.5.2012, 23:30; Ответить: lensoy
Сообщение #5


(Muxa_hb @ 21.5.2012, 02:22) *
если я правильно понял - то вам нужно обернуть все в еще один блок и для него прописать overflow: auto;


Вот, что не так?
<html>
<head>
<style>
html, body{
margin:0;
padding:0;
}
#mainblock {
overflow: auto;
}

#topblock {
width:100%;
background-color: #0066CC;
height:100px;
}
#centerblock {
width:100%;
height:100%;
background-color: #FEFDA3;
}
#bottomblock {
width:100%;
background-color: #00CC00;
height:100px;
}
</style>
</head>
<body>
<div id='mainblock'></div>
<div id='topblock'></div>
<div id='centerblock'></div>
<div id='bottomblock'></div>
</div>
</body>
</html>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 20.5.2012, 23:50; Ответить: Muxa_hb
Сообщение #6


:rjunimagu: непростительная ошибка
<div id='mainblock'></div>
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 20.5.2012, 23:50; Ответить: Azazaza_hb
Сообщение #7


Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 21.5.2012, 8:45; Ответить: lensoy
Сообщение #8


Спасибо, Azazaza, то что надо! :goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 21.5.2012, 8:52; Ответить: Azazaza_hb
Сообщение #9


lensoy, :goodpost:
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
lensoy
lensoy
Topic Starter сообщение 21.5.2012, 9:29; Ответить: lensoy
Сообщение #10


Есть еще один нескромный вопрос. Как осуществить такую вот вещь: http://ec-dom.ru/show2.php
Т.е. инфа находится в первом блоке. Инфы больше - блок растет и в какой-то момент полностью перекрывает средний блок. До этого нижний блок приклеен к полу.
Я сделал вот так:
<html>
<head>
<style>
html, body{
height:100%;
padding:0;
margin: 0;
}
#block {
background-color: #0066CC;
min-height:100%;
position:relative
}
#top {
top:0;
width:100%;
background-color: #37ac20;
}
#bottom {
bottom:0;
position:absolute;
height:150px;
width:100%;
background-color: #FEFDA3;
}
</style>
</head>
<body>
<div id='block'>
<div id='top'>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>
LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>
LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>LOL<br>
</div>
<div id='bottom'></div>
</div>
</body>
</html>

Т.е. вообще среднего блока просто нет. И все работает. Но в реале нет. В реале верхних блок иногда почему-то залезает под нижний.
Примерно так: [IMG]http://i.imgur.com/7VjYJ.jpg[/IMG]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
« Предыдущая тема · Программная часть · Следующая тема »
 
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как скрыть блок в приложении на Android
 0 Вито_052 1094 15.12.2019, 12:37
автор: Вито_052
Открытая тема (нет новых ответов) Появляющийся блок
 0 sergei_burg 2219 1.6.2019, 13:39
автор: -sergei1980-
Открытая тема (нет новых ответов) Перенести блок FAQ с сайта
Верстка
 3 Gera 2556 13.12.2018, 15:40
автор: mmkulikov
Открытая тема (нет новых ответов) Куплю места на мордочках, под сквозные ссылочки под блок сквозных ссылок.
тематика: СМИ,Туризм,Медицина
 4 SeoGanik 9633 18.2.2017, 12:33
автор: SeoGanik
Открытая тема (нет новых ответов) Выровнить абсолютный блок по центру НЕИЗВЕСТНОГО размера без js
 2 lensoy 5592 27.9.2015, 19:08
автор: -lensoy-


 

Режим отображения: Стандартный · Переключить на: Линейный · Переключить на: Древовидный

Подписка на тему · Сообщить другу · Версия для печати · Подписка на этот форум

RSS Текстовая версия Сейчас: 25.4.2024, 21:31

Дизайн

 
Форум IP.Board © 2024  IPS, Inc.
Лицензия зарегистрирована на: MaulNet
Jooble
Форум IP.Board © IPS, Inc.
Лицензия зарегистрирована на: MaulNet