Статический заголовок + меню, прокручиваемый корпус - PullRequest
Новая
       13

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

10 голосов
/ 04 марта 2011

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

+--------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's -->
<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>

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

Ответы [ 5 ]

7 голосов
/ 04 марта 2011

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

1 голос
/ 04 марта 2011 
<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/

0 голосов
/ 23 октября 2015

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

То, что вы ищете, является подмножеством дизайна 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's 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>
0 голосов
/ 04 марта 2011

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

0 голосов
/ 04 марта 2011

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

...