Проблема с высотой колонок (обрезается высота)

angelxalfa · August 10, 2013

Доброго времени суток. ГУРУ HTML, взываю к вашей помощи.

Возникла проблема: пытаюсь верстать сайт на основе блоков. Тело сайта состоит из горизонтальных шапки, навигационной панельки, вертикальных 5 колонок (3х с содержанием (центральная резиновая, две боковые с фиксированной в пикселях шириной) и 2 по бокам - стилистических), и футера.

Две самые крайние справа с слева колонки (leftmainlayout и rightmainlayout) имеют ширину 70пикс. а высоту заданную в процентах (100%) и заполнены повторяющимися по вертикали рисунками (70х50px). Пока сайт помещается в высоту экрана - все отлично. Но при превышении страницей высоты экрана - фоновые изображения крайних колонок перестают повторяться (попросту обрезается фон). обрезание фона происходит приблизительно на высоте одного экрана от верха страницы. При указании высоты колонок в пикселях - они продолжаются согласно указанному размеру (но не буду же я под каждую страницу свою высоту указывать...). При увеличении высоты BODY или HTML до 200% - 300% - 400% и т.д. - высота фона увеличивается в 2-3-4 раза соответственно. То есть напрашивается вывод, что по какой-то причине контейнер родитель BODY обрезает высоту фона колонок, хотя колонки с содержимым уходят вниз и высота BODY явно должна быть более одного экрана. Перепробовал все что мог....уже даже код с нуля писать пытался - безрезультатно.....ПОМОГИТЕ!!!!!!!

Вот код странички:

<html>
<head>
<title>Примерный сайт
</title>
<style type="text/css">
HEADER, NAV, ASIDE, SECTION, FOOTER, body {display: block}
HTML {height: 100%}
BODY {min-height: 100% position: auto; background: url(images/c.png) repeat-y; background-size: 100%;}
.leftmainlayout {width: 70px; height: 100%; position: absolute; left: 0; background: #8B7E66 url(images/l.png) repeat-y; background-size: 100%; }
.rightmainlayout {width: 70px; height: 100%; position: absolute; right:0; background: #8B7E66 url(images/r.png) repeat-y; background-size: 100%; }
.headerlayout {
background: #8B7E66;
position: relative;
border-radius: 10px;
height: 200px;
padding: 10px;
}
.symbol {
width: 300px;
height: 300px;
float: left;
margin: 0;
padding: 0;
}
.slogan {text-align: center}
.navlayout {
background: #FFFF00;
position: relative;
border-radius: 10px;
padding: 10px;
margin: 10px 0 10px;
}
.leftcollayout {
background: #00BFFF;
min-height: 300px;
position: absolute;
border-radius: 10px;
width: 200px;
padding: 10px;
left: 100px;
}
.centercollayout {
background: #8470FF;
min-height: 300px;
position: absolute;
border-radius: 10px;
left: 330px;
right: 280px;
padding: 10px;
}
.rightcollayout {
background: #EEB4B4;
min-height: 300px;
position: absolute;
right:50;
width: 200px;
border-radius: 10px;
padding: 10px;
}
.footerlayout {
background: #CD5C5C;
position:fixed;
bottom: 0px;
border-radius: 10px;
width: 100%;
height: 50px;
padding: 10px;
}
</style>
</head>
<body>
<header class="headerlayout">
<figure class="symbol">
<img src="D:\Сайт\Html\Сайт\images\крест.jpg" alt="Главная"/>
</figure>
<section class="slogan">
Mediway - Ваш путеводитель в мире здоровья и красоты
</section>
</header>
<nav class="navlayout">
2
</nav>
<section class="leftmainlayout">
</section>
<section class="rightmainlayout">
</section>
<aside class="leftcollayout">
4XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования Javascript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и Javascript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.
W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.
Следует понимать, что, несмотря на схожесть названий, HTML5 не является продолжением HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.
Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.
Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
Воспроизведение видеороликов.
Воспроизведение аудиофайлов.
Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
Фоновые вычисления — стандартный способ запуска Javascript в браузере в фоновом режиме.
Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
Рисование — внутри тега с помощью Javascript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести
</aside>
<section class="centercollayout">
4XHTML хорошо подходит для обучения и вырабатывания правильной манеры вёрстки благодаря своим формальным правилам и более жёсткому, по сравнению с HTML синтаксису. Однако за десять лет прошедших со дня выпуска XHTML морально устарел и уже не соответствует современным условиям. В частности, нет штатных средств для проигрывания аудио и видеороликов, нет поддержки геолокации, возможности рисовать непосредственно в браузере, не хватает некоторых элементов форм и много другого. Конечно, часть этих проблем давно решается через сторонние плагины к браузеру, например, Adobe Flash воспроизводит видео, Google Gears реализует локальные базы данных и запуск скриптов в фоновом режиме. Язык программирования Javascript позволяет реализовать недостающий функционал форм и различные эффекты на странице. Но все эти технологии имеют определённые ограничения — плагины нужно устанавливать дополнительно, при этом они могут не работать, как Flash на iPhone и iPad, далеко не всё умеет и Javascript. Популярность мобильных устройств, развитие каналов связи переместило акцент веб-технологий на мультимедиа, т.е. воспроизведение потокового аудио и видео, а также соответствующих файлов. Ничего этого в XHTML нет.
W3 Consortium, разработчик спецификаций HTML и XHTML, начал работать над XHTML 2.0, в котором указанные недостатки предыдущей версии бы обходились. В результате этот проект оказался замороженным и не завершён. Обеспокоенные медленным ходом работ разработчики браузеров Safari, Firefox и Opera основали свою собственную организацию WHATWG (Web Hypertext Application Technology Working Group, Рабочая группа по разработке гипертекстовых приложений Интернета), которая подхватила упавшее знамя. Идеи W3C, современные потребности пользователей и мнения веб-разработчиков воплотились в новом языке разметки названном HTML5.
Следует понимать, что, несмотря на схожесть названий, HTML5 не является продолжением HTML4 или XHTML. Скорее речь идёт о новом языке Web Applications 1.0, который в маркетинговых целях назван знакомой аббревиатурой и построен на базе HTML.
Официально стандарт HTML5 ещё не завершён, но современные браузеры уже умеют частично с ним работать. Итак, что же интересного нам даёт HTML5? Вот некоторые его возможности.
Поддержка геолокации — определение местоположения пользователя на карте и использование этой информации для вычисления маршрута его движения, вывода близлежащих магазинов, кинотеатров, кафе и других данных.
Воспроизведение видеороликов.
Воспроизведение аудиофайлов.
Локальное хранилище — позволяет сайтам сохранять информацию на локальном компьютере и обращаться к ней позже.
Фоновые вычисления — стандартный способ запуска Javascript в браузере в фоновом режиме.
Оффлайновые приложения — страницы, которые могут работать при отключении Интернета.
Рисование — внутри тега с помощью Javascript можно рисовать фигуры, линии, создавать градиенты и трансформировать объекты на лету.
Новые элементы форм: для даты, времени, поиска, чисел, выбора цвета и др.
Кроме этих возможностей в HTML5 включены новые теги для разметки документа, выброшены устаревшие теги и модифицированы некоторые другие. Для вёрстки веб-страниц в первую очередь необходимо понять, что поменялось и как перевести страницу на HTML5.
</section>
<aside class="rightcollayout">
5
</aside>
<footer class="footerlayout">
6
</footer>
</body>
</html>

Struggle · August 10, 2013

Попроще напиши, а то я особо ничего не понял, желательно схему в паинте нарисуй)

раз где-то перестаёт тянуться колонка, значит нет очистки (clear:both)

после плавающего div`a (после блока с float:left) запили очистку

Edited August 10, 2013 by Struggle

angelxalfa · August 10, 2013

Вот скрин сайта:

http://itmages.ru/image/view/1161126/411c525c

Вот скрин с моментон обрезания:

http://itmages.ru/image/view/1161122/77b78366

Float не использовал, выравнивал через абсолюное позиционирование.

Struggle · August 10, 2013


.symbol {
		 width: 300px;
		 height: 300px;
		 float: left;
		 margin: 0;
		 padding: 0;
		 }

это что?

к тому же у тебя кучу absolute, они не тянуться если что

Sign In

Проблема с высотой колонок (обрезается высота)

Question

angelxalfa

Link to comment

Share on other sites

3 answers to this question

Recommended Posts

Struggle

Link to comment

Share on other sites

angelxalfa

Link to comment

Share on other sites

Struggle

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information