2016-07-31 2 views
0

Я хотел бы достичь конкретной компоновки: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> 
+0

Пожалуйста, будьте более конкретными, о том, что вы пробовали, и о том, где не удается реализовать определенную функцию. – ankitjain11

+0

Я пытался листать таблицы, но FF, IE имеют проблемы с уважением переполнения на td и height: 0px на заголовке, чтобы обеспечить гибкость ... его можно сделать каким-то образом FF, но IE противодействует любым попыткам. Большинство из них были позже просто протестированы и неудачны система, поэтому ее трудно быть более конкретным в этом ... я понял, что FF нуждается в высоте: 100% на разных элементах, чем webkit, чтобы сделать ее по крайней мере работой на паратали, но это все страшно – astromedia

+0

Вы должны опубликовать некоторый код, чтобы сообщество могло взгляните на проблему. Я предполагаю, что вам нужно: 'height: 100vh' на Контент –

ответ

1

Вот динамическое решение, с гибкой высоты на header и прокруткой контента в main

html, body { 
 
    margin: 0; 
 
    height: 100vh; 
 
} 
 
.wrapper { 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
.header { 
 
    padding: 10px; 
 
    background: lightgray; 
 
} 
 
.main { 
 
    flex: 1;       /* fill remaining space */ 
 
    padding: 10px 10px 70px;   /* 70px bottom padding */ 
 
    background: lightblue; 
 
    overflow: auto; 
 
}
<div class="wrapper"> 
 
    <div class="header"> 
 
    Header 
 
    </div> 
 
    <div class="main"> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
     <p>Some content</p> 
 
    </div> 
 
</div>

+0

Я думал о сгибах, но ... насколько он совместим с кроссбраузером? :) ... И полоса прокрутки должна быть только в содержимом div - заголовок должен вести себя как fixed, thx в любом случае. – astromedia

+0

@astromedia Обновлен мой ответ. «flex» поддерживает + 95% браузеров, все новые версии браузера + 2 обратно, также нет другого рабочего решения, если вы хотите гибкий заголовок (можно сделать это с помощью таблицы, хотя у IE есть проблемы). Хорошая вещь, в вашем случае, заключается в том, что в неподдерживаемых браузерах страница будет работать, но заголовок будет прокручиваться вместе с ней, поэтому я бы не стал колебаться, делая это так. – LGSon

+0

Хорошо спасибо, похоже, работает в основных браузерах и достаточно легко модифицировать, поэтому я принимаю это как ответ. Я надеюсь, что это не сломает что-то после дополнительного тестирования/добавления контента, но пока это кажется хорошим :) – astromedia

0

То, что вы описали (если я понял он правильно) относительно прост - два элемента уровня блока, фиксированный header и прокрутка main под ним, каждый со 100% width.

Пример:

body { 
 
margin: 0; 
 
padding: 0; 
 
overflow: hidden; 
 
} 
 

 
header, main { 
 
display: block; 
 
} 
 

 
header { 
 
position: fixed; 
 
z-index: 6; 
 
width: 100%; 
 
height: 140px; 
 
font-size: 36px; 
 
color: rgb(255,255,255); 
 
background-color: rgb(191,0,0); 
 
} 
 

 
main { 
 
position: relative; 
 
top: 140px; 
 
height: calc(100vh - 140px - 70px); 
 
overflow-y: scroll; 
 
}
<header> 
 
Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header Header 
 
</header> 
 

 
<main> 
 
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main 
 
Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main Main 
 
</main>

+0

Thx для вашего времени, но я был актуальным видом, когда вы объясняли это ... Я пытался сделать некоторые иллюстрации, чтобы облегчить понимание, я надеюсь, что это поможет - [image] (http://imgur.com/a/tZ3tr) – astromedia

+0

Хорошо, все в порядке - я немного изменил его, поэтому приведенный выше ответ должен теперь представлять один подход к тому, чего вы пытаетесь достичь с помощью фиксированного 'header' и' main', который прокручивает, чтобы показать переполнение. – Rounin

+0

Спасибо, кажется, лучше, еще одно, если я могу спросить - этот заголовок не должен иметь указанную высоту (140 пикселей), но быть «гибким» - изменить высоту в зависимости от содержимого ... это было одной из причин, почему это было трудно реализовать для me :) – astromedia

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