Заголовок div находится сверху, вертикальная прокрутка div ниже с помощью полосы прокрутки, прикрепленной к этому div

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

Это то, что я пытаюсь достичь:

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

* = scrollbar

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

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

источник

2012-03-13 Garywoo

'позиция: статическая'? – Jon

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;   
}

источник

2012-03-13 03:23:20 bhamlin

скрипка: http://jsfiddle.net/n9P3X/1/ – valentinas

Спасибо, это точно, такое простое решение, не знаю, почему это ускользнуло от меня, ха-ха. – Garywoo

Используйте 'overflow-y: auto;' если есть вероятность, что '.content' не дойдет до нижней части страницы. В этом случае он удалит полосу прокрутки. – Keith

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

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

источник

2012-03-13 03:31:30 Dips

Это не будет работать с высотой макета, установленной на главном div (например, 100%), хотя спасибо. – Garywoo

Вы должны использовать 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>

источник

2012-03-13 03:35:37 PasteBT

Найдены гибкими магии.

Here пример использования фиксированного заголовка и прокручиваемого содержимого. Код:

<!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 (верхний, нижний колонтитул, навигация, сторона и содержимое), используя гибкий дисплей, перейдите к here.

источник

2015-10-23 07:04:14

это гениальное решение! это лучше, чем 100vh – Student22

Заголовок div находится сверху, вертикальная прокрутка div ниже с помощью полосы прокрутки, прикрепленной к этому div

ответ

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