Макет верхнего колонтитула со 100% -ной высотой содержимого в IE8

Я пытался понять, как это сделать без JavaScript и отступов, и до сих пор это была миссия невозможна. Кто-нибудь знает, есть ли способ, с чистым CSS и дивами для достижения простого макета:Макет верхнего колонтитула со 100% -ной высотой содержимого в IE8

Simple Layout

http://jsfiddle.net/zLzg8v3s/1/

Это именно то, что я пытаюсь сделать, но с дивами и CSS:

http://jsfiddle.net/u0u7snh6/1/

HTML

<body class="table"> 
<div id="header" class="tableRow" id="top" role="banner"> 
    <div class="tableCell"> 
     <div> 
      This is the top banner 
     </div> 
    </div> 
</div> 
<div class="tableRow tableContent"> 
    <div class="tableCell"> 
     <div id="content"> 
      This is the content 
     </div> 
    </div> 
</div> 
<div id="footer" class="tableRow" id="bottom"> 
    <div class="tableCell"> 
     <div> 
      This is the footer 
     </div> 
    </div> 
</div> 
</body>

CSS

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
} 
.table { 
    display: table; 
    height: 100%; 
    width: 100%; 

} 
.tableRow { 
    display: table-row; 
    text-align: center; 
    height: 1px; 
} 

.tableCell { 
    display: table-cell; 
    vertical-align: middle; 

} 

.tableCell div { 
    max-width: 400px; 
    margin: auto; 
    background-color: brown; 
} 

.tableContent { 
    height: 100%; 
    background-color: yellow; 
    vertical-align: middle; 
} 

.tableContent * { 
    height: 100%; 
    vertical-align: middle; 
    margin: auto; 
} 

.contentDiv { 
    margin: auto; 
    position: absolute; 
    top: 0; left: 0; bottom: 0; right: 0; 
} 

#header { 
    background-color: pink; 
} 
#footer { 
    background-color: orange; 
}

Это так близко, как я могу добраться до макета ... то, что я не могу исправить:

1) Содержание внутри содержимого DIV должны быть выровнены по вертикали средний (очень важно, чтобы BG ячейки содержимого также составлял 100% высоты, поэтому он соединяется с верхним и нижним колонтитулами)

2) Не должно быть переполнения: это Поведение IE8 только (насколько я могу сказать), так что это будет трудно увидеть в JsFiddle ... полный код ниже можно тестировать локально в режиме эмуляции IE8,:

<!doctype html> 
<html lang="en-CA" prefix="og: http://ogp.me/ns#"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1" /> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>MOCKUP</title> 

    <style> 
     html, body { 
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 
     .table { 
      display: table; 
      height: 100%; 
      width: 100%; 

     } 
     .tableRow { 
      display: table-row; 
      text-align: center; 
      height: 1px; 
     } 

     .tableCell { 
      display: table-cell; 
      vertical-align: middle; 

     } 

     .tableCell div { 
      max-width: 1200px; 
      margin: auto; 
      background-color: brown; 
     } 

     .tableContent { 
      height: 100%; 
      background-color: yellow; 
      vertical-align: middle; 
     } 

     .tableContent * { 
      height: 100%; 
      vertical-align: middle; 
      margin: auto; 
     } 

     .contentDiv { 
      margin: auto; 
      position: absolute; 
      top: 0; left: 0; bottom: 0; right: 0; 
     } 

     #header { 
      background-color: pink; 
     } 
     #footer { 
      background-color: orange; 
     } 

    </style> 
</head> 
<body class="table"> 
<div id="header" class="tableRow" id="top" role="banner"> 
    <div class="tableCell"> 
     <div> 
      This is the top banner 
     </div> 
    </div> 
</div> 
<div class="tableRow tableContent"> 
    <div class="tableCell"> 
     <div id="content"> 
      This is the content 
     </div> 
    </div> 
</div> 
<div id="footer" class="tableRow" id="bottom"> 
    <div class="tableCell"> 
     <div> 
      This is the footer 
     </div> 
    </div> 
</div> 
</body> 
</html>

источник

2014-08-30 Nicolas Bouvrette

Хорошо нашел проблему в коде : http://jsfiddle.net/zLzg8v3s/9/ Для тестирования IE8: http://jsfiddle.net/zLzg8v3s/9/show/

CSS:

#content{ 
    margin: 0 auto; 
}

Удалить это с йо Ур CSS:

.tableContent * { 
    height: 100%; 
    vertical-align: middle; 
    margin: auto; 
}

Снятие звездочки фиксируется все.

Решение: 2 JSFIDDLE:http://jsfiddle.net/p1bbyfqa/2/

HTML:

<div id="container"> 
     <div class="header"> 
     <h4>This is header</h4> 
     </div> 
     <div class="row"> 
     <div class="content"> 
      <div class="left">Left Col</div> 
      <div class="middle">Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
       Middle Col<br /> 
      </div> 
      <div class="right">Right Col</div> 
     </div> 
    </div> 
    <div class="footer"> 
     <h4>This is footer</h4> 
    </div> 
</div>

CSS:

html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
    } 

    #container { 
     display: table; 
     height: 100%; 
     width: 100%; 
     text-align: center; 
    } 

    .row { 
    display: table-row; 
    width:100%; 
    height: 100%; 

    } 

    .header, .footer{ 
    background: pink; 
    display:table-row; 
    text-align: center; 
    vertical-align: middle; 
    } 

    .content { 
     display: table; 
     background: brown; 
     width:100%; 
     height: 100%; 
     overflow: auto; 
    } 
    .left, .right{ 
     background: green; 
     display: table-cell; 
     width:10%; 
     vertical-align: middle; 
    } 
    .middle{ 
     background: brown; 
     display: table-cell; 
     vertical-align: middle; 
    }

источник

2014-08-30 15:23:57 Ani

Это does't работа будет, если добавить многострочный содержание (по крайней мере, в IE8), и заполнение по-прежнему остается проблемой: http://jsfiddle.net/zLzg8v3s/3/ –

Проверьте второй вариант. Обновленный ответ ..Thx для указания его – Ani

На самом деле вы пробовали это в IE8? Это не очень хорошо для меня. Это главная проблема здесь ... Мне нужно поддерживать IE8, к сожалению. –

Макет верхнего колонтитула со 100% -ной высотой содержимого в IE8

ответ

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