VPF::[html|css] в опере таблица не хочет растягиваться

zailax

Дата 27.4.2013, 01:26 (ссылка)

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

Загрузка ...

Новичок

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

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

в опере таблица не хочет растягиваться по высоте на 100%. как можно исправить?

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="SHORTCUT ICON" href="/ICON.gif"type="image/x-gif">
<link href="style.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="content">
    <div id="box">
    
        <table style="height:100%; width:100%;" border="0" cellspacing="0" cellpadding="0">
            <tr>
                <td height="100px" width="100%"></td>
            </tr>
            <tr>
                <td height="100%" width="100%"><div class="red">
                            
                    </div>
                </td>
                
            </tr>
        </table>
        
        
        
    </div>
</div>
</body>
</html>

Код


html, head, body{
 width: 100%;
 min-height:100%;
 margin: 0;
 padding: 0;

}

#content{
 background: #aaaaaa;
 width: 100%; 
 min-height: 100%;


}

#box{
 position: relative;
 width: 500px;
 min-height: 100%;
 left: 50%;
 margin-left: -250px; 

}

#box .red{
 background: red;

 width: 500px; 
  height: 100%;

}

в общем я хочу чтобы red был резиновым. пробовал делать его без таблицы, просто опуская на 100px вниз (top: 100px;), но тогда эти сто пикселей всплывали ниже и появлялась белая область, мучился-мучился но так и не смог справится) в результате решил использовать таблицу. в хроме и мазиле все гуд, в ie 9 были траблы, но после обновления до 10ого они пропали и описать их не могу, не помню) а вот опера не дружит. если задавать высоту дива red конкретным значением все растягивается, но вот в процентах не хочет.

Это сообщение отредактировал(а) zailax - 30.4.2013, 12:05

zailax

Дата 27.4.2013, 16:03 (ссылка)

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

Загрузка ...

Новичок

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

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

еще такая проблема: в ie до 10-ой версии не срабатывает min-height (это то что я писал выше про траблы в ie 9)

zailax

Дата 30.4.2013, 12:09 (ссылка)

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

Загрузка ...

Новичок

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

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

В общем я понял что проблема в min-height. В опере не работает в position: relative, а в ie до 10-ой версии вообще не срабатывает хоть в relative, хоть в absolute. Как это можно исправить??

vinodell

Дата 1.5.2013, 14:11 (ссылка)

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

Загрузка ...

Новичок

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

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

А не знаю но на скорую руку получилось вот так:

Код


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>index</title>
<link rel="SHORTCUT ICON" href="/ICON.gif"type="image/x-gif">
<style type="text/css">
html, head, body{
 width: 100%;
 min-height:100%;
 margin: 0;
 padding: 0;
}
#content{
 background: #aaaaaa;
 width: 100%; 
 height: 100%;
}
#box{
 position: relative;
 width: 500px;
 height: 100%;
 left: 50%;
 margin-left: -250px; 
}
#box .red{
 background: red;
 width: 500px; 
  height: 100%;
}
</style>
</head>
<body>
<div id="content">
    <div id="box">
        <div class="red">
               Текст             
        </div>
    </div>
</div>
</body>
</html>

Проверил в IE8 и 9 вроде работает

Это сообщение отредактировал(а) vinodell - 1.5.2013, 14:11

zailax

Дата 1.5.2013, 23:57 (ссылка)

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

Загрузка ...

Новичок

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

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

я так уже пробовал)
если в red напихать много текста, то ни content ни box не растягиваются..

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