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



 

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

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

2 страниц V   1 2 >
Открыть тему
Тема закрыта
> Заливка колонок фоном
dimanchik87
dimanchik87
Topic Starter сообщение 28.7.2012, 19:10; Ответить: dimanchik87
Сообщение #1


Здравствуйте всем!Помогите решить проблему!Как залить фоном колонки так,чтобы независимо от контента,они были залиты полностью!(вариант типа:"задать высоту" не смешной).Вот пример моего кода:
<body>
<div id="all">
<div id="header">Добро пожаловать на мою экпериментальную страничку!</div>
<div id="left">ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ</div>
<div id="right">ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ<br>ССЫЛКИ</div>
<div id="content">kgheg ero zdfb afduh fdjbh afbjzfd zdfbj fj f'vbh bvjzndf;kjz hfvjzbf vf' zfdz fd'bh zfjzdf'bh fd jhz fdhzdf bzdfjv zdfjv zfjv zfvh zfjv;z i</div>
</div>
<div id="footer">&copy Вася Пупкин </div>
</body>
Файл CSS
html,body{
margin:0;
padding:0;
height:100%;
}
#header{
height:50px;
text-align:center;
background:#cf9;
}
#all{
min-height:100%;
margin-bottom:-100px;
}
#left{
float:left;
width:200px;
background:#cf3;

}
#right{
float:right;
width:100px;
background:#f3c;
}
#content{
margin:0 auto;
color:#fff;
background:#ccc;
padding-bottom:100px;

}
#footer{
height:100px;
background:#c63;
}
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 28.7.2012, 19:37; Ответить: Azazaza_hb
Сообщение #2


http://www.getincss.ru/2009/07/11/4-sposob...nakovoj-vysoty/
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimanchik87
dimanchik87
Topic Starter сообщение 28.7.2012, 20:18; Ответить: dimanchik87
Сообщение #3


(Azazaza_hb @ 28.7.2012, 22:37) *

Это не совсем то,что мне нужно.тут рассказывается как создать одинаковые колонки по колонке максимальной высоты,а мне нужно,чтобы независимо от количества контента они были одинаковыми(даже если в них по 2 строчки)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 28.7.2012, 21:06; Ответить: Azazaza_hb
Сообщение #4


несовсем понятно, вы хотите чтоб колонки были одной высоты и минимальная высота была до низа экрана?
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimanchik87
dimanchik87
Topic Starter сообщение 28.7.2012, 21:37; Ответить: dimanchik87
Сообщение #5


Ну почти...
У меня внизу футер,я хочу,чтобы он при небольшом количестве контента был внизу экрана (т.е. я делаю min-height:100% и позволяю футеру залезать на свои колонки с помощью margin и padding). При этом я хочу,чтобы все колонки шли до футера и были залиты Background.
Ну..... КАК-ТО ТАК.
Кстати очень интересная статья про колонки,спасибо!!!!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Muxa_hb
Muxa_hb
сообщение 28.7.2012, 21:42; Ответить: Muxa_hb
Сообщение #6


я использую плагин jquery EqualHeihgt для этого обычно
а чтобы футер был всегда внизу - делайте для общего блока (или body) min-height:600px к примеру
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimanchik87
dimanchik87
Topic Starter сообщение 28.7.2012, 21:55; Ответить: dimanchik87
Сообщение #7


а чем лучше min-height:600px чем min-height:100%?а если будет изначально 800px и мало контента или 400px?

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


А почему не получается задать height:100% для каждой колонки в процентах от div в котором это всё лежит с min-height:100%
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Azazaza_hb
Azazaza_hb
сообщение 29.7.2012, 1:00; Ответить: Azazaza_hb
Сообщение #9


вот попробуйте, написал такой скрипт, его в head поместите и поменяйте первые 3 строчки после второй
[JS]
<script type="text/javascript">
window.onload = function(){
headerID = "header"; //id хэдэра
footerID = "footer"; //id футера
contentID = "middle"; //id блока с колонками
var elements = [];
var maxHeight = 0;
var content = document.getElementById(contentID);
var headerFooter = document.getElementById(headerID).clientHeight + document.getElementById(footerID).clientHeight;
var contentH = content.clientHeight;
var list=content.childNodes;
var k = 0;
for(var i=0; i<list.length; i++) if(list[i].nodeType == 1) {
if(maxHeight < list[i].clientHeight) maxHeight = list[i].clientHeight;
elements[k] = list[i];
k++;
}
function collumsResize(){
var windowHeight = (window.innerHeight ? window.innerHeight : (document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body.offsetHeight));
var freeForContent = windowHeight - headerFooter;
if(freeForContent >= contentH){
maxHeight = freeForContent;
}
for(var i=0; i<elements.length; i++) elements[i].style.height = maxHeight+"px";

}
collumsResize();
window.onresize = function() {
collumsResize();
}
}
</script>
[/JS]
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
dimanchik87
dimanchik87
Topic Starter сообщение 29.7.2012, 1:46; Ответить: dimanchik87
Сообщение #10


Спасибо огромное за старания,но это работает только когда мало текста,как только происходит переполнение не работает padding для блока с колонками,а для левой/правой колонки и min-height:100%.Но если не замарачиваться и не еб.ть себе голову,то хороший вариант.Спасибо!
З.Ы. но всё-таки интересно добиться поставленной цели!
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
2 страниц V   1 2 >
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

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

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Проблема с тянущимся фоном
1 Sabrava 2763 27.5.2013, 22:15
автор: -danil-html-
Открытая тема (нет новых ответов) Заливка видео с помощью HTML !
1 Ankedo 3239 11.11.2012, 20:51
автор: -html-performer-
Открытая тема (нет новых ответов) где найти такой плагин ? (слайд с фоном за картинкой)
2 coma 3576 6.9.2012, 19:52
автор: -coma2-
Открытая тема (нет новых ответов) Заливка шаблона на сайт
5 MrAMD 25830 17.2.2012, 16:34
автор: -Knt-4-
Открытая тема (нет новых ответов) Скачивание/заливка файлов
от малых до больших размеров
2 Felorion 1357 21.10.2011, 23:19
автор: Felorion


 



RSS Текстовая версия Сейчас: 25.4.2024, 20:52
Дизайн