Как преобразовать эту таблицу в divs/css?

Я действительно хочу работать с Див, и я не могу показаться, чтобы получить эквивалент к следующей простой макет таблицы:Как преобразовать эту таблицу в divs/css?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
    <head> 
    <title>Table example</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <style type="text/css"> 
     html, body {height: 100%} 
     .content {width: 750px; vertical-align: top} 
    </style> 
    </head> 
    <body style="margin: 0; padding: 0"> 
    <table style="height: 100%; width: 100%; border-collapse: collapse"> 
     <tr style="background-color: #666666"> 
     <td></td> 
     <td class="content" style="height: 100px"><h1>Header Content</h1></td> 
     <td></td> 
     </tr> 
     <tr style="background-color: #BBBBBB"> 
     <td></td> 
     <td class="content" style="background-color: #FFFFFF"><h1>Main Content</h1></td> 
     <td></td> 
     </tr> 
     <tr style="background-color: #666666"> 
     <td></td> 
     <td class="content" style="height: 100px"><h1>Footer Content</h1> 
     </td> 
     <td></td> 
     </tr> 
    </table> 
    </body> 
</html>

важные элементы, которые я хочу сохранить:

Любое реальное содержание - фиксированная ширина. (в данном случае 750px)
Фоны верхнего и нижнего колонтитула расширяются до 100% ширины страницы.
Основной контентный фон не расширяется горизонтально, а расширяется вертикально, чтобы заполнить область между верхним и нижним колонтитулом.
Нижний колонтитул всегда находится внизу страницы, даже если основное содержание не очень высокое.

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

Редактировать: Изменен пример, показывающий, что он работает, даже если он не находится в режиме quirks. Вышеприведенное подтверждает.

Edit 2:

Я нашел способ сделать это по большей части с помощью JavaScript. Итак, я думаю, мой вопрос: как мне это сделать без javascript. Вот что я использую (который я уверен, что работает только в Firefox, но я мог бы исправить это):

<script type="text/javascript"> 
function changeDiv() { 
    document.getElementById("content").style.minHeight = document.body.clientHeight - 200 + "px"; 
} 
changeDiv(); 
window.onresize = changeDiv; 
</script>

«содержание» будет указано основное содержание DIV я хочу, чтобы расширить.

источник

2009-03-29 btmorex

- нижний колонтитул всегда в нижней части страницы, даже если контент действительно длинный? – inspite

Со столами: да. – btmorex

Ваш настоящий вопрос, похоже, «как мне получить мой главный div для расширения, а нижний колонтитул - в нижней части страницы».

И ответ будет: вы также не можете делать это с таблицами, по крайней мере, если вы используете doctype, который указывает HTML 4.0 переходный или выше. Да, это работает без doctype, но это потому, что в этом случае браузеры входят в свой режим «quirks».

Я считаю, что вы можете сделать это с абсолютным позиционированием, и вы, вероятно, видели примеры. Лично я смотрю больше на подход, который использует фиксированное позиционирование для нижнего колонтитула, с большим z-порядком, чтобы он отображался поверх содержимого, а затем использовал эффект градиента, чтобы основной контент исчез за ним. Вот пример (созданный кем-то намного лучше меня): http://www.designbyfire.com/

источник

2009-03-29 12:14:06 kdgregory

Ваша характеристика «реального вопроса» правильна, за исключением того, что основной фон содержания совпадает с фоном тела, это не имеет значения. Кроме того, он работает с переходом doctype html 4.0, вы добавляете «html, body {height: 100%}». – btmorex

Что вы имеете в виду, вы тоже не можете делать с таблицами? Просто укажите html, body, table {height: 100%}; затем укажите фиксированные высоты для строки заголовка и нижнего колонтитула. Пожалуйста, исправьте это в своем сообщении. –

Вот моя попытка. Кажется ОК FF3 и IE8:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<style type="text/css"> 
html, body { padding: 0; margin: 0; } 
div { padding: 1px; } 
#wrapper, #wrapper-top, #wrapper-bottom { position: absolute; left: 0; right: 0; width: 100%; } 
#wrapper-top { background-color: #666; height: 100px; top: 0; } 
#wrapper-bottom { background-color: #666; height: 100px; bottom: 0; } 
#wrapper { top: 100px; bottom: 100px; background-color: #DDD; } 
#header, #content, #footer { width: 750px; margin: 0 auto; height: 100%; min-height: 100%; } 
#content { background-color: white; } 
</style> 
</head> 
<body> 
<div id="wrapper-top"> 
    <div id="header"><h1>Header Content</h1></div> 
</div> 
<div id="wrapper"> 
    <div id="content"><h1>Main Content</h1></div> 
</div> 
<div id="wrapper-bottom"> 
    <div id="footer"><h1>Footer Content</h1></div> 
</div> 
</body> 
</html>

Примечание: тип документа имеет важное значение и силы режима совместимости в IE.

источник

2009-03-29 12:40:54 cletus

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

Попробуйте использовать FooterStick для борьбы с этим ... см. Мой ответ. – alex

Для получения нижнего колонтитула в нижней части страницы, в зависимости от того, превышает ли содержимое высота видового экрана, или если контент недостаточно доходит до нижней части (но вы все еще хотите, чтобы нижний колонтитул отображался внизу) попробуйте реализовать FooterStick.

источник

2009-03-29 12:51:02 alex

alex, я считаю, что пробовал этот метод. Проблема в том, что div-расширитель расширяется, но фактический контент div не работает. Итак, в моем примере вы просто получаете кучу вертикального пространства, заполненного цветом фона тела. Если цвет фона = цвет контента bg, он работает, но в противном случае это не так. – btmorex

Что делать, если вы устанавливаете контент div на высоту: 100%? – alex

Это можно сделать в браузерах без IE. Но в IE (по крайней мере, IE7-) вам нужно использовать таблицы, а предпочтительно conditional comments.

я не нашел время, чтобы проверить, но попробовать это и посмотреть, если он работает:

На HTML, используйте строгий доктайп. Предпочтительно верстку как этот

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

и поместить его в тело:

<div class="header"></div> 
<div class="content"></div> 
<div class="footer"></div>

И на CSS:

div.header, 
div.content, 
div.footer { 
    position: absolute; 
} 

div.header { 
    top: 0; 
    height: 20px; 
} 

div.footer { 
    bottom: 0; 
    height: 20px; 
} 

div.content { 
    top: 0; 
    bottom: 0; 
    /*can't remember if it was margin or padding, if one doesn't works, try the other*/ 
    margin-top: 20px; 
    margin-bottom: 20px; 
}

источник

2009-04-10 16:33:15

Вместо position:absolute использовать position:fixed для DIV (заголовок/колонтитул).

div.header, div.footer { 
    position: fixed; } 
div.header{ 
    top: 0; } 
div.footer { 
     bottom: 0; }

И соответственно align ваш content divpadding зависит от header/footer height. Поэтому всякий раз, когда вы будете scroll, ваша страница footer будет внизу, а header будет на вершине. А также предоставить z-index:yourvalue; для header/footer.

источник

2015-01-13 06:01:36 Rahul

Как преобразовать эту таблицу в divs/css?

ответ

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