Элемент заголовка остается сверху, элемент вертикальной прокрутки внизу с полосой прокрутки, прикрепленной только к этому элементу - PullRequest
Новая
       7

Элемент заголовка остается сверху, элемент вертикальной прокрутки внизу с полосой прокрутки, прикрепленной только к этому элементу

35 голосов
/ 13 марта 2012

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

Вот чего я пытаюсь достичь: 

______________________
|_______header_______|
|                  |*|
|   Container Div  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
|                  |*|
----------------------

* = scrollbar

Макет должен быть плавным, и если окно растянуто по вертикали, только контейнер div и его полоса прокрутки должны быть длиннее.

Я не хочу размещать заголовок position: fixed;, так как тогда полоса прокрутки будет справа от нее, а не под ней.

Ответы [ 4 ]

48 голосов
/ 13 марта 2012

HTML: 

​<div class="header">This is the header</div>
<div class="content">This is the content</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

CSS: 

​.header
{
    height:50px;
}
.content
{
    position:absolute;
    top: 50px;
    left:0px;
    right:0px;
    bottom:0px;
    overflow-y:scroll;        
}​
9 голосов
/ 23 октября 2015

Нашел магию гибкости.

Здесь - пример того, как сделать фиксированный заголовок и прокручиваемый контент. Код: 

<!DOCTYPE html>
<html style="height: 100%">
  <head>
    <meta charset=utf-8 />
    <title>Holy Grail</title>
    <!-- Reset browser defaults -->
    <link rel="stylesheet" href="reset.css">
  </head>
  <body style="display: flex; height: 100%; flex-direction: column">
    <div>HEADER<br/>------------
    </div>
    <div style="flex: 1; overflow: auto">
        CONTENT - START<br/>
        <script>
        for (var i=0 ; i<1000 ; ++i) {
          document.write(" Very long content!");
        }
        </script>
        <br/>CONTENT - END
    </div>
  </body>
</html>

* Преимущество гибкого решения заключается в том, что контент не зависит от других частей макета. Например, контент не должен знать высоту заголовка.

Для полной реализации Holy Grail (заголовок, нижний колонтитул, навигация, сторона и содержимое), используя flex display, перейдите к здесь .

0 голосов
/ 13 марта 2012

Вам нужно использовать js, чтобы получить лучший рост для тела div 

<html><body>
<div id="head" style="height:50px; width=100%; font-size:50px;">This is head</div>
<div id="body" style="height:700px; font-size:100px; white-space:pre-wrap;    overflow:scroll;">
This is body
T
h
i
s

i
s

b 
o
d
y
</div>
</body></html>
0 голосов
/ 13 марта 2012

Вот демоверсия .Используйте position:fixed; top:0; left:0;, чтобы заголовок всегда оставался сверху. 

​#header {
    background:red;
    height:50px;
    width:100%;
    position:fixed;
    top:0;
    left:0;    
}.scroller {
    height:300px; 
    overflow:scroll;    
}
...