Модераторы: Illuminaty
  

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Как растянуть div на оставшеюся высоту. 
V
    Опции темы
ShurikA
Дата 9.3.2009, 11:17 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
У меня есть header и footer которые должны быть на самом верху и в самом низу страницы соответственно (оба div-ы)...
Между ними есть ещё один div (content) который должен растягиваться на всю оставшеюся высоту как минимум.

С тем что вы предлогаете content всегда как минимум восотой во ВСЮ страницу. и естественно всегда есть прокрутка. 
Как это правильно сделать? 
Код

<div id="headerDiv">
<img src="http://localhost/fluortech/skins/default/images/logo.png"/>
</div>
<div id="topMenuBarDiv">
            .
</div>
<div id="bodyDiv">
    <p>qq</p>
</div>


bodyDiv должен занимать всё что осталось после topMenuBarDiv и headerDiv.


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
bars80080
Дата 9.3.2009, 11:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 50
Всего: 315
http://www.alexilin.ru/5-sovetov-po-html-i-css/
PM MAIL WWW   Вверх
ShurikA
Дата 10.3.2009, 03:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
Получилось такое:
Код

<body dir="ltr">
<div id="container">
<div id="headerDiv"><img
    src="http://localhost/fluortech/skins/default/images//logo.png" /></div>
<div id="topMenuBarDiv">.</div>
<div id="bodyDiv">
<p>qq</p>
</div>
<div id="footerDiv">.</div>
</div>
</body>


Код

@CHARSET "UTF-8";
/*=====MAIN TEMPLATES=====I*/
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
body {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    color:#2B3637;
    background-color:#FFF;
    background-image:url(../images/bg.png);
    text-align: center;
    height: 100%;
}
img {
    border:0px;
    padding: 0px;
    margin: 0px;
}
table {
    border-collapse:collapse;
    border:0px;
    padding:0px 0px 0px 0px;
}
td {
    font:normal 11px Tahoma, Arial;
    vertical-align: middle;
    line-height:16px;
    padding:0px 0px 0px 0px;
}
input, textarea, select {
    font:normal 11px Tahoma;
    padding:2px 0px 2px 0px;
    margin:2px 0px 2px 0px;
    vertical-align:top;
}
div {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
p {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
/* =====MAIN====== */
#container {
    width: 905px;
    min-height:100%;
    height:100%;
    position:relative;
    margin-left: auto;
    margin-right: auto;
}
#headerDiv {
    width: 100%;
    height: 100px;
    text-align: left;
    background-image: url(../images/headerBg.png);
    background-repeat: no-repeat; 
    background-position: left top;
}
#topMenuBarDiv {
    width: 100%;
    height: 39px;
    text-align: center;
    background-image: url(../images/topMenuBar.png);
    background-position: top left;
    background-repeat: no-repeat;
    color: transparent;
}
#bodyDiv {
    width: 100%;
    height: inherit;
    padding: 0px;
    margin-bottom: -46px;
    background-image: url(../images/bodyBg.png);
    background-position: top left;
    background-repeat: repeat-y;
}
#footerDiv {
    position:relative;
    bottom:0;
    width:100%;
    height:46px;
    background-image: url(../images/footerBg.png);
    background-position: top left;
    background-repeat: no-repeat;
}


всё вроде хокей, но bodyDiv получает всю высоту страницы а не оставшеюся после headerDiv, topMenuBarDiv и footerDiv.
Можно было бы конечно убрать height из bodyDiv, но тогда, конечно footerDiv остаётся в самом низу, но bodyDiv остаётся не растянутым.

Что я тут не понимаю?


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
Violator
Дата 10.3.2009, 03:58 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 15
Всего: 15
ShurikA, 
вы поставили у #bodyDiv height:inherit - соответственно он будет принимать такую же высоту как и у блока-родителя
PM MAIL   Вверх
ShurikA
Дата 10.3.2009, 04:29 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
Цитата(Violator @  10.3.2009,  02:58 Найти цитируемый пост)
вы поставили у #bodyDiv height:inherit - соответственно он будет принимать такую же высоту как и у блока-родителя 

И что же надо поставить в высоту?


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
Violator
Дата 10.3.2009, 11:51 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 15
Всего: 15
ShurikA, 
убрать height...
растянуть блок на оставшуюся высоту не получится, да и не надо это, если же у вас возникает проблема с бэкграундом то перенесите его из блока #bodyDiv в #container
PM MAIL   Вверх
ShurikA
Дата 10.3.2009, 21:09 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
Цитата(Violator @  10.3.2009,  10:51 Найти цитируемый пост)
если же у вас возникает проблема с бэкграундом то перенесите его из блока #bodyDiv в #container 

Но в таком случае бэкграунд растягивается и на headerDiv и topMenuBarDiv тоже...  smile 


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ShurikA
Дата 11.3.2009, 07:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
Цитата(ShurikA @  10.3.2009,  20:09 Найти цитируемый пост)
Но в таком случае бэкграунд растягивается и на headerDiv и topMenuBarDiv тоже...

Так как мой бэкграунд это одна линия которая поторяется по высоте, я даже не могу начять бэкграунд с определённой высоты. Он прорисовывается по всй высоте.

 smile  smile  smile 


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
Violator
Дата 11.3.2009, 10:52 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Бывалый
*


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

Репутация: 15
Всего: 15
ShurikA, 
поставьте для хеадера и топменю background-color:#fff;

Это сообщение отредактировал(а) Violator - 11.3.2009, 10:55
PM MAIL   Вверх
ShurikA
Дата 11.3.2009, 11:03 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
Цитата(Violator @  11.3.2009,  09:52 Найти цитируемый пост)
ShurikA, 
поставьте для хеадера и топменю background-color:#fff;

Но общий background не белый.

Добавлено через 6 минут и 21 секунду
это тоже картинка.

Присоединённый файл ( Кол-во скачиваний: 5 )
Присоединённый файл  Picture_1.png 236,64 Kb


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
ShurikA
Дата 11.3.2009, 11:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Зануда
***


Профиль
Группа: Завсегдатай
Сообщений: 1364
Регистрация: 29.10.2005
Где: Канада

Репутация: нет
Всего: 3
вроде решил проблемму, так:

Код

<body dir="ltr">
<div id="container">
    <div id="topWrapper">
        <div id="headerDiv">
            <img src="http://localhost/fluortech/skins/default/images//logo.png" />
        </div>
        <div id="topMenuBarDiv">
            .
        </div>
    </div>
    <div id="bodyDiv">
        <p>content</p>
    </div>
</div>
<div id="footerDiv">
    .
</div>
</body>


Код

@CHARSET "UTF-8";
/*=====MAIN TEMPLATES=====I*/
* {
    margin: 0px;
    padding: 0px;
}
html,
body {
   margin:0;
   padding:0;
   height:100%;
}
body {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
    color:#2B3637;
    background-color:#FFF;
    background-image:url(../images/bg.png);
    text-align: center;
    height: 100%;
}
img {
    border:0px;
    padding: 0px;
    margin: 0px;
}
table {
    border-collapse:collapse;
    border:0px;
    padding:0px 0px 0px 0px;
}
td {
    font:normal 11px Tahoma, Arial;
    vertical-align: middle;
    line-height:16px;
    padding:0px 0px 0px 0px;
}
input, textarea, select {
    font:normal 11px Tahoma;
    padding:2px 0px 2px 0px;
    margin:2px 0px 2px 0px;
    vertical-align:top;
}
div {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
p {
    margin:0px 0px 0px 0px;
    padding:0px 0px 0px 0px;
}
/* =====MAIN====== */
#container {
    width: 905px;
    min-height:100%;
    height: auto !important;
    height: 100%;
    position:relative;
    margin-left: auto;
    margin-right: auto;
    background-image: url(../images/bodyBg.png);
    background-repeat: repeat-y; 
}
#topWrapper {
    width: 100%;
    height: 139px;
    background-color:#FFF;
    background-image:url(../images/bg.png);
    background-repeat: repeat;
}
#headerDiv {
    width: 100%;
    height: 100px;
    text-align: left;
    background-image: url(../images/headerBg.png);
    background-repeat: no-repeat; 
    background-position: left top;
}
#topMenuBarDiv {
    width: 100%;
    height: 39px;
    text-align: center;
    background-image: url(../images/topMenuBar.png);
    background-position: top left;
    background-repeat: no-repeat;
    color: transparent;
}
#bodyDiv {
    width: 100%;
    padding-bottom: 46px;
}
#footerDiv {
    width: 905px;
    margin-left: auto;
    margin-right: auto;
    height: 46px; 
    margin-top: -46px;
    position:relative;
    bottom: 0px;
    background-image: url(../images/footerBg.png);
    background-position: top left;
    background-repeat: no-repeat;
}


и результат...

Присоединённый файл ( Кол-во скачиваний: 12 )
Присоединённый файл  Picture_2.png 229,76 Kb


--------------------
Если долго мучиться, что нибудь получится...
user posted image
PM MAIL WWW ICQ Skype   Вверх
  
 Ответ в темуСоздание новой темы Создание опроса
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | Вёрстка веб-сайтов | Следующая тема »

Подписаться на тему | Подписка на этот форум | Скачать/Распечатать тему


 




[ Время генерации скрипта: 0.1224 ]   [ Использовано запросов: 21 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
 По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.