VPF::Закругденные углы и 100% высоты - Форум программистов

Alex_B

Дата 24.7.2007, 08:55 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Вот так растягиваю div c id="all" на 100% высоты экрана - работает в IE, FF и Opera

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<meta http-equiv="Content-Language" content="ru"/>

<style type="text/css">
<!--
html { height: 100%; margin: 0; padding: 0; }         
body { height: 100%; margin: 0; padding: 0; }

p {margin: 0; padding: 0;}

#all {
   position: relative;
   min-height: 100%;
   _height: 100%;
   margin: 0 auto;
   background: #5af;
   width: 1000px;   
}

#bottom {
   position: absolute;
   bottom: 0;
   background-color: #FF0000;
   width: 100%;
}
-->
</style>

</head>
<body>

<div id="all">
   <div id="some">
   <p>asasas</p>
   </div>

   <div id="bottom">123</div>
</div>

</body>
</html>

А теперь нужно вложить в <div id="all"> еще 3 div-а так, что бы они в точности повторяли <div id="all">.

Код


<body>

<div id="all">
<div class="all">
<div class="all">
<div class="all">

   <div id="some">
   <p>asasas</p>
   </div>

   <div id="bottom">123</div>

</div>
</div>
</div>
</div>

</body>

Не получается растянуть вложенные div-ы c class="all" по высоте.

Как растянуть вложенные div - ы на 100% высоты родительского div-а?

Спасибо.

japanes

Дата 24.7.2007, 10:22 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

используй свойство стиля min-height;

Код


<style>
div#all{
min-height:100%;//height:100%;
padding:0px;
margin:0px;
}
div.inner_block{
margin:0px;
min-height:100%;//height:100%;
}
</style>

Alex_B

Дата 24.7.2007, 10:28 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Не работает.
(или напиши пожалуйста весь код)

japanes

Дата 24.7.2007, 11:05 (ссылка)

(нет голосов)

Загрузка ...

Бывалый

Профиль
Группа: Участник
Сообщений: 176
Регистрация: 20.1.2007

Репутация: 7
Всего: 7

для создания блоков с закругленными углами, выбраный вами вариант не лучший:

Код


<style>
div.round_block {background-color: #d6dadb; color: black; position: relative; width: 80%; left:-15px;}

div.round_block div.lt-corner {top: 0; left: 0; background: url('/i/greyBlock-lt.gif') 0 0 no-repeat;}
div.round_block div.rt-corner {top: 0; right: 0; background: url('/i/greyBlock-rt.gif') 0 0 no-repeat;}
div.round_block div.rb-corner {bottom: 0; right: 0; background: url('/i/greyBlock-rb.gif') 0 0 no-repeat;}
div.round_block div.lb-corner {bottom: 0; left: 0; background: url('/i/greyBlock-lb.gif') 0 0 no-repeat;}

div.round_block div.rt-corner, div.round_block div.rb-corner {//right: expression( this.parentNode && this.parentNode.offsetWidth % 2 ? -1 : -0 );}
div.round_block div.rb-corner, div.round_block div.lb-corner {//bottom: expression( this.parentNode && this.parentNode.offsetHeight % 2 ? -1 : -0 );}
</style>

<div class="round_block">
<div class="lt-corner"><!-- spacer --></div>
<div class="rt-corner"><!-- spacer --></div>
<div class="rb-corner"><!-- spacer --></div>
<div class="lb-corner"><!-- spacer --></div>
<div class="content">
<!-- тут контент блока -->
</div>
</div>

только в стилях пути к рисуночкам укажи правильные и рисуночки тож ;)

SelenIT

Дата 24.7.2007, 14:45 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Position:absolute + bottom: 0 - к сожалению, тоже не лучший вариант из-за проблем с округлением в IE (отчего и понадобилась добавка с expression-ом). Имхо, лучше использовать отрицательные margin-ы (пример).

Это сообщение отредактировал(а) SelenIT - 24.7.2007, 14:47

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Alex_B

Дата 26.7.2007, 10:42 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Я видел этот пример, но он не подходит.

Есть возможность именно растянуть вложенный DIV на 100% по высоте.

Ведь одни DIV на 100% высоты экрана можно растянуть.
Так почему не получается растянуть вложенный в него див так же?

SelenIT

Дата 26.7.2007, 12:59 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Цитата(Alex_B @ 26.7.2007, 10:42

)

он не подходит

Почему?

Цитата(Alex_B @ 26.7.2007, 10:42

)

Ведь одни DIV на 100% высоты экрана можно растянуть.
Так почему не получается растянуть вложенный в него див так же?

Потому что проценты высоты наследуются только от явно заданной height, но не от min-height. Так что или будет работать только в IE, или не будет растягиваться по контенту, если он не будет умещаться на экране...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Alex_B

Дата 27.7.2007, 09:01 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

Спасибо за разьяснения.

Втом варианте с отрицательными margin-ами сделано вот так:

Код


<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ru">
<head>
<title>title</title>
<style type="text/css">
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
p { margin: 0; padding: 0; color: #fff; }
#main {
    min-height: 100%;
    background:#014d89 url(corner_02.gif) no-repeat 100% 0;
}
* html #main { height: 100%; }

#above { position: relative; z-index: 1; background:url(corner_01.gif) no-repeat; padding: 20px 20px 50px; }
#footer { margin: -100px 0; height:100px; background:#fff url(bottom.gif) repeat-x; }
#footer div { background: url(corner_04.gif) no-repeat 100% 0; }
#footer div div { height: 50px; background:url(corner_03.gif) no-repeat; }
</style>
</head>
<body>
   <div id="main">
      <div id="above">
         <p>Very-very much text.</p><p>Very-very much text.</p>

         <p>Very-very much text.</p><p>Very-very much text.</p>
         <p>Very-very much text.</p><p>Very-very much text.</p>
         <p>Very-very much text.</p><p>Very-very much text.</p>
         <p>Very-very much text.</p><p>Very-very much text.</p>
                  <p>Very-very much text.</p><p>Very-very much text.</p>

     
      </div>

   </div>
   <div id="footer"><div><div></div></div></div>
</body>
</html>

<div id="main"> - залит цветом, а как background у него стоит изображение уголка, а мне нужно сделать background повторяющимся рисунком.

Никак не соображу как? :(

SelenIT

Дата 27.7.2007, 15:27 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Тогда #main пусть и будет заполнен повторяющимся рисунком, а оба верхних уголка придется "нарисовать" в #above (по аналогии с уголками в футере, добавив еще один вложенный блок)...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

Alex_B

Дата 27.7.2007, 15:54 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

А как это сделать, если есть возможность напишите пожалуйста код.

Alex_B

Дата 27.7.2007, 17:10 (ссылка)

(нет голосов)

Загрузка ...

Шустрый

Профиль
Группа: Участник
Сообщений: 122
Регистрация: 24.4.2007

Репутация: нет
Всего: 1

SelenIT, вспомнил, вот почему не подходит:

Если задать <div id="main"> поторяющийся рисунок, то этот рисунок перекрывает нихнии углы

SelenIT

Дата 27.7.2007, 19:45 (ссылка)

(нет голосов)

Загрузка ...

баг форума

Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 97
Всего: 401

Alex_B, да не должно такого быть по идее. Вы точно задавали рисунок для #main, а не для #above?

В крайнем случае можно поставить position:relative; z-index: 1; футеру, а для above увеличить z-index до 2 - тогда, по логике, все будет наверняка перекрываться в правильной последовательности...

--------------------

Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!

MDM

Дата 11.9.2007, 14:36 (ссылка)

(нет голосов)

Загрузка ...

Опытный

Профиль
Группа: Участник
Сообщений: 264
Регистрация: 16.3.2007
Где: г. Нальчик

Репутация: нет
Всего: 4

Посмотри здесь: http://forum.vingrad.ru/forum/topic-170259/kw-div-width.html
Примерно такую же задачу решал! Описано несколько методов!...

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| Вёрстка веб-сайтов \| Следующая тема »