Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > Вёрстка веб-сайтов > растянуть div по высоте

Автор: check 27.7.2007, 14:37

Код


<html>
<head>
<style type="text/css">
  * { padding:0; margin:0; }
  #content { position:relative; min-height:100%; }
  #footer { height:40px; width:100%; position:absolute; bottom:0;background-color:#AFEEEE;}
</style>
</head>
<body bgcolor="#EBEBEB">
<div id="content">
  <table width="100%" cellspacing="0">
  <tr><td height="40" bgcolor="#AFEEEE">
     &nbsp;&nbsp;&nbsp;<span style="color: rgb(139, 0, 0); font-weight: bold;">Текст</span>
  </td></tr>
  </table>
<fieldset>
   style="margin:10px;height:100%">

    текст

  </div>
</div>    
</fieldset>
<div id="footer">
<table width="100%" height="100%" cellspacing="0">
  <tr>
    <td width="50%">&nbsp;</td><td align="center" valign="middle">&nbsp;</td>
  </tr>
</table>
</div>
</body>
</html>

Как сделать, чтобы див с id="mid" занимал всё свободное пространство между таблицей сверху и футером?
То есть рамка fieldset должна вплотную прилегать к ним и охватывать все свободное пространство
и не должна зависеть от объёма текста внутри <div id="mid">.

Автор: SamDark 27.7.2007, 14:47

check,
DOCTYPE какой?

Автор: japanes 27.7.2007, 16:33

check, в ИЕ свойство min-height не работает.

Код


<style type="text/css">
  html {height:100%;}
  body { padding:0; margin:0; height:100%; }
  #content { position:relative; min-height:100%;//height:100%; }
</style>

так должно работать во всех браузерах.

Автор: check 27.7.2007, 17:37

Цитата(SamDark @ 27.7.2007, 14:47

)

DOCTYPE какой?

Никакого. Это может помочь?

japanes, у меня не работает, причём кроссбраузерно =(

Автор: SelenIT 27.7.2007, 19:54

Имхо, для Quirks mode (который тут и используется) лучшее решение - таблица. Любые бестабличные варианты требуют специфических хаков. Недавно была http://forum.vingrad.ru/forum/topic-165094.html (там нужно было растянуть iframe похожим образом) - но варианта для Safari лично я так и не нашел. Впрочем, есть еще одна кроссбраузерная альтернатива - использовать Javascript, но это "неспортивно как-то"...

Автор: japanes 28.7.2007, 10:41

check, должно работать при разметке:

Код


<body>
<style type="text/css">
  html {height:100%;}
  body { padding:0; margin:0; height:100%; }
  #content { position:relative; min-height:100%;//height:100%;/* забыл вот это: */ margin:0px; }
</style>
<div id="content">
  sdasf
</div>
</body>

Автор: check 28.7.2007, 16:03

Но у меня-то разметка другая.

Я поступил совсем неспортивно

Код


<hr style="position:absolute;top:40px;"/>

Код


<hr style="position:absolute;bottom:40px;"/>

А филдсет убрал совсем. Визуально это выглядит так же как филдсет натянутый(прошу прощения конечно) на div занимающий 100% свободного места. Или же как вариант надеть по филдсету на шапку и на футер.

ЗЫ Что такое Quirks mode?

Автор: japanes 28.7.2007, 16:52

Цитата(check @ 28.7.2007, 15:03

)

Но у меня-то разметка другая.

так ты можешь перенести все в блок <div id="content"></div>. просто такой див необходим для того, что бы футер был все время внизу (при других разметках с абсолютно поз. дивом и нулевым ботомом, при body > чем 100%, в смысле body с прокруткой, див-футер внизу не держиться).

Автор: SelenIT 28.7.2007, 17:26

Цитата(check @ 28.7.2007, 16:03

)

Что такое Quirks mode?

Режим отображения страниц "как в старых браузерах" (т.е. обратной совместимости), с поддержкой их персональных "глюков" (в отличие от режима поддержки стандартов). Включается при отсутствии доктайпа или неправильном доктайпе. Подробнее http://www.quirksmode.org/css/quirksmode.html и по ссылкам оттуда.

Автор: liliana2 4.12.2007, 09:46

[URL=http://sibznak.com/test69/mangal.shtml]
Контент имеет min-height, а в связи с тем, что ie не поддерживает min-height, Слева 2 блока налагаются друг на друга
как сделать чтобы в ie отображалось также корректно как и в других браузерах?

Автор: SelenIT 4.12.2007, 10:22

liliana2, в IE height работает так, как должен min-height. Поэтому используйте любой хак для IE (лучше всего фирменный - conditional comments) и задайте соотв. height только для IE...

Автор: liliana2 4.12.2007, 10:25

У мну с комментами вообще все плохо,
Должно быть так?:


не могли бы вы подсказатькуда его вставлять этот коммент?

Автор: SelenIT 4.12.2007, 11:17

Вот так:

Код


<!--[if IE]>
<style>
#content { height:600px; }/* или как там этого дива зовут... :) */
</style>
<![endif]-->

Вставлять после <link>-а на основную таблицу стилей.

Автор: liliana2 4.12.2007, 11:25

Что я делаю не так что все равно не работает?
Файл (сcss) Делаю так:

Код


<!--[if IE]> #info: height:600px; <![endif]-->
#main{
    width:850px;
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 9px;
    clear: both;
    margin-right: 50px;
    margin-left: 50px;
    min-height: 600px;
}
#top{
    font-family: Arial;
    width: 800px;
    clear: right;
    background-image:  url(img/s8.jpg);
    height: 140px;}

Все равно не работает

Автор: SelenIT 4.12.2007, 11:36

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

Автор: liliana2 4.12.2007, 11:44

ох, простите дуру грешную, делаю так:

Код


<!--[if IE]> #info{ height: 600px; }<![endif]-->
#1{
    width:850px;
    margin-right: 50px;
    margin-left: 50px;
    min-height: 600px;}

#2{
    width:300px;
}
#info{
    min-height: 450px;
}

и не работает
и не получается потому что если подставлять <style> коммент становится наполовину не коммент и один фиг не работает

Автор: SelenIT 4.12.2007, 11:46

liliana2, коммент нужно вставлять не в CSS-файл, а в HTML.

Автор: liliana2 4.12.2007, 11:52

Значит все-таки так:

Код


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<title>Сиб-ЗНАК М - изготовление дорожных знаков и средств ограждения</title>
<meta http-equiv="Тип-содержимое" content="text/html; charset=windows-1251">
<link href="mystyle.css" rel="stylesheet" type="text/css">
<!--[if IE]><style>#info{ height: 600px; }</style><![endif]-->
<meta name="description" content="Сиб-ЗНАК М - изготовление дорожных знаков и средств ограждения">
<meta http-equiv="Тип-содержимое" content="text/html; charset=windows-1252">
</head>
<body>
<div id="mai

УРА! ЗАРАБОТАЛО! спасибо горомадное