Статический заголовок + меню, прокручиваемое тело

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

+--------screen-----------------------+
|       ______________________      |*|
|       |_static_header______|      |*|
|       |             |      |      |*|
|       | content     |menu  |      |*|
|       | scrollable  |static|      |*|
|       |             |      |      |*|
|       |             |      |      |*|
|       |             |      |      |*|
+-------------------------------------+

Содержимое имеет переменную высоту, а панель прокрутки контента должна отображаться в теле страницы (а не на ней в области). Мне удалось получить основную идею, но у меня возникли проблемы с получением содержимого div в правильном положении, когда отображается полоса прокрутки, и даже если я всегда буду показывать полосы прокрутки, я не могу использовать фиксированную ширину, потому что они отличаются от браузера до браузера.

<div style="position:absolute; background-color:Transparent; left:0px; right:0px; height:100px; z-index:2;">
    <div style="background-color:Silver; width:1000px; height:100px; margin:0 auto;">
        Header
    </div>
</div>

<!-- Fixed div acting as the body "page" so the scrollbar shows as the page -->
<div style="position:absolute; left:0px; top:0px; bottom:0px; right:0px; overflow-y:auto; padding-top:100px; z-index:1;">
    <div style="position:relative; width:800px; height:100%; margin:0 auto; padding-right:200px;">
        <div style="background-color:Orange; width:100%; height:900px;">
            Content
        </div>
    </div>
</div>

<div style="position:absolute; left:50%; right:0px; padding-top:100px; z-index:0;">
    <div style="width:500px; float:left;">
        <div style="background-color:Green; float:right; width:200px; ">
            Menu
        </div>            
    </div>
</div>

В коде выше содержание отключено шириной полосы прокрутки, как я могу получить ее правильно с остальной частью страницы (т.е. вычислять ее позицию без учета ширины полосы прокрутки, даже если она есть)?

Ответ 1

Если я правильно понимаю вашу проблему, это будет решение: http://jsfiddle.net/7pJS8/

Ответ 2

<style>
body {
    padding: 0px;
}
.container {
    margin: 0px auto;
    position: relative;
    width: 500px;
}

#header {
    left: 0px;
    position: fixed;
    top: 0px;
    width: 100%;
    z-index: 1000;
}
#header .container {
    background: blue;
    height: 100px;
}

#content {
    background: green;
    height: 1500px;
    margin-top: 100px;
}
#content .inner {
    margin-right: 200px;
}

#sidebar {
    left: 0px;
    position: fixed;
    top: 100px;
    width: 100%;
    z-index: 1000;
}
#sidebar .inner {
    background: red;
    height: 200px;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 200px;
}
</style>

<div id="header">
    <div class="container">
        header
    </div>
</div>
<div id="content" class="container">
    <div class="inner">
        content
    </div>
</div>
<div id="sidebar">
    <div class="container">
        <div class="inner">
            sidebar
        </div>
    </div>
</div>

Возможное решение: http://jsfiddle.net/zWERN/

Ответ 3

Есть способы сделать это с фиксированными высотами, а затем использовать свойство переполнения в прокручиваемых областях. Однако, это не очень хорошая практика, на что вы должны обратить внимание - это использовать липкий заголовок или прокручиваемый заголовок (который следует за областью просмотра, когда пользователь прокручивает вверх и вниз) из jQuery или вашей библиотеки JS по выбору.

Ответ 4

Не разрешает ли position:fixed решить вашу проблему? Если вы установили position:fixed в заголовок и меню div?

Ответ 5

Настройка прокрутки на всей странице может привести к исчезновению заголовка и меню - когда контент длинный.

То, что вы ищете, является подмножеством проекта Holy Grail.

Здесь реализация с использованием гибкого дисплея:

<!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>
    <!-- No need for 'flex-direction: row' because it the default value -->
    <div style="display: flex; flex: 1">
      <div>NAV|</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>
      <div>|SIDE</div>
    </div>
    <div>------------<br/>FOOTER</div>
  </body>
</html>