Я хотел бы достичь конкретной компоновки:100% макет Высоты с фиксированным заголовком + переливом без JS
------------------------------
Header - flexable height depending on content
------------------------------
Content with overflow filling remaining space to 100% height
------------------------------
+ Some space after (padding/bottom?) (70px for example)
------------------------------
И это должно иметь высоту 100% и ширину документа 100%. Кажется, я не могу использовать divs для достижения этой цели, поэтому я пытался листать таблицы, но я не мог найти способ, как сделать это с совместимостью с кроссбраузерами (последняя попытка работала во всем, кроме IE (конечно) и была плохо написана). Может ли кто-нибудь дать мне пример, который работает так?
Я рассматривал подобные вопросы здесь, но я не могу найти эту конкретную ситуацию.
PS: извините за мой английский - не мой основной язык
EDIT: Часть кода я actualy есть, но он работает на WebKit Сейчас
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<style>
html, body
{
margin: 0px;
padding: 0px;
height: 100%;
}
#fixedHeaderTable
{
height: 100%;
width: 100%;
border: 0px solid black;
margin: 0px;
}
#fixedHeaderTable td
{
vertical-align: top;
}
#fixedHeaderTable .headerRow
{
height: 0px;
}
#fixedHeaderTable .headerRow td
{
padding: 10px;
}
#T
{
overflow-y: auto;
height: 100%;
padding: 10px;
}
@-moz-document url-prefix() {
#content {
padding-bottom: 140px;
}
}
</style>
</head>
<body>
<table id="fixedHeaderTable">
<thead style="height: 0px;">
<tr class="headerRow">
<td style="height: 1px;">
Header
</td>
</tr>
</thead>
<tbody style="height: 100%;">
<tr style="height: 100%;">
<td style="padding-bottom: 70px; height: 100%;">
<div class="box" id="T">
Long content
</div></td>
</tr>
</tbody>
</table>
</body>
</html>
Пожалуйста, будьте более конкретными, о том, что вы пробовали, и о том, где не удается реализовать определенную функцию. – ankitjain11
Я пытался листать таблицы, но FF, IE имеют проблемы с уважением переполнения на td и height: 0px на заголовке, чтобы обеспечить гибкость ... его можно сделать каким-то образом FF, но IE противодействует любым попыткам. Большинство из них были позже просто протестированы и неудачны система, поэтому ее трудно быть более конкретным в этом ... я понял, что FF нуждается в высоте: 100% на разных элементах, чем webkit, чтобы сделать ее по крайней мере работой на паратали, но это все страшно – astromedia
Вы должны опубликовать некоторый код, чтобы сообщество могло взгляните на проблему. Я предполагаю, что вам нужно: 'height: 100vh' на Контент –