Как бы я преобразовал этот макет таблицы в divs / css? - PullRequest
Новая
       10

Как бы я преобразовал этот макет таблицы в divs / css?

0 голосов
/ 29 марта 2009

Я действительно пытаюсь работать с div и не могу получить эквивалент следующей простой компоновке таблицы: 

<!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>

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

  1. Любой реальный контент имеет фиксированную ширину. (в данном случае 750px)

  2. Фоны верхнего и нижнего колонтитула расширяются до 100% ширины страницы.

  3. Фон основного содержимого не расширяется по горизонтали, но расширяется по вертикали, заполняя область между верхним и нижним колонтитулами.

  4. Нижний колонтитул всегда находится внизу страницы, даже если основное содержимое не очень высокое.

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

Редактировать: Изменен пример, чтобы показать, что он работает, даже когда не в режиме причуд. Вышеуказанное подтверждает.

Редактировать 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>

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

Ответы [ 5 ]

0 голосов
/ 13 января 2015

Вместо position:absolute используйте position:fixed для div (верхний / нижний колонтитул). 

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

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

0 голосов
/ 10 апреля 2009

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

Я не потратил время на тестирование, но попробуйте это и посмотрите, работает ли оно:

В html используйте строгий тип документа. Желательно xhtml вот так 

<!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;
}
0 голосов
/ 29 марта 2009

Вот моя попытка. Кажется, хорошо на 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>

Примечание: DOCTYPE важен и обеспечивает режим совместимости в IE.

0 голосов
/ 29 марта 2009

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

0 голосов
/ 29 марта 2009

Похоже, что ваш настоящий вопрос звучит так: «Как мне расширить мой основной блок и чтобы нижний колонтитул переместился в конец страницы?»

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

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

...