относительное и абсолютное позиционирование в IE и FF

Я хочу иметь div, который растет, когда вы добавляете в него больше контента, имеет по крайней мере высоту области просмотра и имеет верхний и нижний колонтитулы, верхние и нижние. Я придумал следующее, которое отлично работает в IE7, но не работает в ff3.5.относительное и абсолютное позиционирование в IE и FF

Это HTML (добавить повторен 'Много текста
' для main_body расти из окна просмотра):

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type"> 
<title>Testing 123</title> 
<link rel="stylesheet" href="css/testing.css"> 
</head> 
<body> 
<div id="main_body"> 
    <div id="header"></div>  
    <div id="content"> 
    Lots of text<br> 
    </div> 
    <div id="footer"></div>  
</div> 
</body> 
<html>

Это CSS:

* { 
    margin: 0px 0px 0px 0px; 
    padding: 0px 0px 0px 0px; 
    border: none; 
    z-index: 10; 
    font-family: Arial; 
    font-size: 20px; 
    text-decoration: none; 
    text-align: left; 
    } 
html, body { 
    height: 100%; 
    background-color: rgb(255, 255, 255); 
    } 
#main_body { 
    position: relative; 
    min-height: 100%; 
    height: auto !important; 
    height: 100%; 
    margin: 0px 20px 0px 20px; 
    } 
#header { 
    position: absolute; 
    top: 20px; 
    left: 0px; 
    height: 50px; 
    width: 100%; 
    background-color: rgb(40, 40, 40); 
    } 
#content { 
    margin: 80px 10px 50px 10px; 
    }  
#footer { 
    position: absolute; 
    bottom: 20px; 
    left: 0px; 
    height: 20px; 
    width: 100%; 
    background-color: rgb(40, 40, 40); 
    }

Я думаю, что это должно работа в соответствии со спецификациями. И это происходит в IE, но не в ff3.5. Помогите.

EDIT: я узнал (благодаря Jeepstone), что она отлично работает, когда я изменить запас для заполнения в #content.

источник

2010-01-22 jzp74

100% высота не является прямой. Вам нужно сделать что-то вроде http://www.xs4all.nl/~peterned/examples/csslayout1.html.

Кстати, где вы сбрасываете *, вы должны посмотреть на Эрика Майера. Сброс CSS http://meyerweb.com/eric/tools/css/reset/, поскольку сброс всего может вызвать проблемы.

источник

2010-01-22 12:19:45 Jeepstone

Спасибо за ваши ссылки Jeepstone! Первый решил мои проблемы. – jzp74

Это работает для меня в FF 3.5.7. Вы также можете попытаться установить позиционирование относительно статического, что может решить проблему. Дайте мне знать!

источник

2010-01-22 12:14:26 Eggie

На самом деле это не работает для меня в браузерах IE8, FF3.5 и Webkit и Opera.

Я не могу вспомнить фактическую причину, но если вы добавите что-то, например.   после деления «main_body», он работает.

<div id="main_body">&nbsp;

источник

2010-01-22 12:16:23

Спасибо, это работает частично, когда я следую вашему предложению. Когда страница больше, чем область просмотра, нижний колонтитул не касается нижней части страницы. – jzp74

Для этого потребуется другое решение. Вы проверили ссылки из Jeepstone? –

относительное и абсолютное позиционирование в IE и FF

ответ

Смежные вопросы