опять же высота min-height

white_kh · April 20, 2009

Привет. Появилась задача сделать вокруг блока несколько фоновых изображений. Все получилось, но вот есть глюк, который я не знаю как исправить... если высота блока превышает 100%, то фоновые изображения остаются на месте, а контент вылазиет за их границы. Объясните с примером плз как решить данную задачу. Спасибо!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<style>

html, body {height:100%; margin:0; padding:0;}

#wrapper {width:80%; height:100%; margin: 0px auto; background:silver;}

#page {width:100%; height:100%;}

#t {background: url(http://4play.com.ua/img/t.jpg) top repeat-x; height:100%;}

#b {background: url(http://4play.com.ua/img/b.jpg) bottom repeat-x; height:100%;}

#l {background: url(http://4play.com.ua/img/l.jpg) left repeat-y; height:100%;}

#r {background: url(http://4play.com.ua/img/r.jpg) right repeat-y; height:100%;}

#tl {background: url(http://4play.com.ua/img/tl.jpg) top left no-repeat; height:100%;}

#tr {background: url(http://4play.com.ua/img/tr.jpg) top right no-repeat; height:100%;}

#bl {background: url(http://4play.com.ua/img/bl.jpg) bottom left no-repeat; height:100%;}

#br {background: url(http://4play.com.ua/img/br.jpg) bottom right no-repeat; height:100%;}

</style>

</head>

<body>

content

</div>

</body>

</html>

Searcher · April 20, 2009

Это не глюк, это вы так запрограммировали поведение страницы. Для #page и других блоков стоит определенная высота, так эта высота и будет сохранятся как указано, независимо от содержимого. Только IE по-своему понимает такой вариант... Но не о нем речь.

Вобщем, смотря что вы хотите, чтобы с контентом было... Если хотите полосу прокрутки то добавьте в #page overflow:auto; если хотите, чтобы лишний контент пропадал добавьте overflow:hidden; если хотите чтобы вся ваша система зависела от объема контента - уберите везде указание высоты, да и ширину указывать не надо, если она 100% и позиционирование блоков идет по-умолчанию.

white_kh · April 20, 2009

Это не глюк, это вы так запрограммировали поведение страницы. Для #page и других блоков стоит определенная высота, так эта высота и будет сохранятся как указано, независимо от содержимого. Только IE по-своему понимает такой вариант... Но не о нем речь.
Вобщем, смотря что вы хотите, чтобы с контентом было... Если хотите полосу прокрутки то добавьте в #page overflow:auto; если хотите, чтобы лишний контент пропадал добавьте overflow:hidden; если хотите чтобы вся ваша система зависела от объема контента - уберите везде указание высоты, да и ширину указывать не надо, если она 100% и позиционирование блоков идет по-умолчанию.

Хотелось бы, чтобы минимальная высота была 100%. правда если высота контента превышает 100, то все становится бякой.

если добавить после "content" строку <div style="height:1500px; width:100px; background:red;"></div> . не могу понять почему page не меняет высоту

Justnewone · April 20, 2009

Жестко заданный height не дает. только в IE6 прокатит, во всех остальных надо min-height. Но только на первый DIV в BODY. далее с вложенными этот номер уже не пройдет.

white_kh · April 20, 2009

как тогда это можно реализовать?при том, в ие работает именно так, как мне хотелось, а в остальных что-то не хочет. подскажите реализацию данной идеи

Edited April 20, 2009 by white_kh

Justnewone · April 20, 2009

как тогда это можно реализовать?

Покажите макет того, что нужно, изображение.

white_kh · April 20, 2009

Покажите макет того, что нужно, изображение.

как бы в первом сообщении все есть :lol: ) моно вставить в блокность, задать ему расширение html и глянуть в ие)))

white_kh · April 20, 2009

есть какие-нибудь идеи? :lol:

Justnewone · April 21, 2009

есть какие-нибудь идеи?

Такие вещи, по моему мнению, лучше таблицей. Ей в стилях сказать min-height. ДИВами возможно, но свеч не стоит.

s0rr0w · April 21, 2009

Проблема в том, что вы указываете блокам внутри body напрямую height: 100%, по этой причине и контент вылазит за пределы блока.

Нужно указывать для нормальных браузеров min-height вместо height.

SelenIT · April 21, 2009

Как вариант: LEFT BG - фоном для HTML, RIGHT BG - фоном для BODY { min-height: 100%; position: relative; }, верхнюю и нижнюю "строки" оформить отдельными дивами (контейнер с общим фоном и в нем два плавающих блока, левый и правый), и спозиционировать абсолютно соответственно к верхней и нижней границам body. А у основного контента body задать отступы со всех сторон на размеры соотв. фоновых картинок...

Searcher · April 21, 2009

Да, там проблема с IE, вот немного корявое, но работающее решение:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {height:100%; margin:0; padding:0;}

#wrapper {position:relative; width:80%; *height:100%; min-height:100%; margin: 0px auto; background: url(http://4play.com.ua/img/l.jpg) left repeat-y silver;}
#page {padding: 80px 110px;}


#t {position:absolute; background: url(http://4play.com.ua/img/t.jpg) top repeat-x; top:0; height:71px; width:100%;}
#b {position:absolute; background: url(http://4play.com.ua/img/b.jpg) bottom repeat-x; bottom:0; height:71px; width:100%;}
#r {position:absolute; background: url(http://4play.com.ua/img/r.jpg) right repeat-y; right:0; height:100%; width:101px;}
#r1 {background: url(http://4play.com.ua/img/r.jpg) right repeat-y; height:100%; width:100%;}

#tl {position:absolute; background: url(http://4play.com.ua/img/tl.jpg) top left no-repeat; top:0; left:0; height:71px; width:101px;}
#tr {position:absolute; background: url(http://4play.com.ua/img/tr.jpg) top right no-repeat; top:0; right:0; height:71px; width:101px;}
#bl {position:absolute; background: url(http://4play.com.ua/img/bl.jpg) bottom left no-repeat; bottom:0; left:0; height:71px; width:101px;}
#br {position:absolute; background: url(http://4play.com.ua/img/br.jpg) bottom right no-repeat; bottom:0; right:0; height:71px; width:101px;}

</style>
</head>
<body>
<div id="wrapper">
<div id="r1">

<div id="t"></div>
<div id="b"></div>
<div id="r"></div>
<div id="tl"></div>
<div id="tr"></div>
<div id="bl"></div>
<div id="br"></div>

<div id="page">
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
</div>


</div>
</div>
</body>
</html>

white_kh · April 21, 2009

Да, там проблема с IE, вот немного корявое, но работающее решение:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body {height:100%; margin:0; padding:0;}

#wrapper {position:relative; width:80%; *height:100%; min-height:100%; margin: 0px auto; background: url(http://4play.com.ua/img/l.jpg) left repeat-y silver;}
#page {padding: 80px 110px;}


#t {position:absolute; background: url(http://4play.com.ua/img/t.jpg) top repeat-x; top:0; height:71px; width:100%;}
#b {position:absolute; background: url(http://4play.com.ua/img/b.jpg) bottom repeat-x; bottom:0; height:71px; width:100%;}
#r {position:absolute; background: url(http://4play.com.ua/img/r.jpg) right repeat-y; right:0; height:100%; width:101px;}
#r1 {background: url(http://4play.com.ua/img/r.jpg) right repeat-y; height:100%; width:100%;}

#tl {position:absolute; background: url(http://4play.com.ua/img/tl.jpg) top left no-repeat; top:0; left:0; height:71px; width:101px;}
#tr {position:absolute; background: url(http://4play.com.ua/img/tr.jpg) top right no-repeat; top:0; right:0; height:71px; width:101px;}
#bl {position:absolute; background: url(http://4play.com.ua/img/bl.jpg) bottom left no-repeat; bottom:0; left:0; height:71px; width:101px;}
#br {position:absolute; background: url(http://4play.com.ua/img/br.jpg) bottom right no-repeat; bottom:0; right:0; height:71px; width:101px;}

</style>
</head>
<body>
<div id="wrapper">
<div id="r1">

<div id="t"></div>
<div id="b"></div>
<div id="r"></div>
<div id="tl"></div>
<div id="tr"></div>
<div id="bl"></div>
<div id="br"></div>

<div id="page">
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
content content content content content content content content content content content content content content content content 
</div>


</div>
</div>
</body>
</html>

Огромное спасибо!!!!!!!!

Sign In

опять же высота min-height

Question

Link to comment

Share on other sites

12 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information