Необычный веб-сайт с 3 колонками на одной странице - просто прокрутка по центру

Question

Необычный веб-сайт с 3 колонками на одной странице - просто прокрутка по центру

0

Мне нужен совет по дизайну веб-сайта, если и как это можно реализовать.

ОК, клиент воображает, что на одном/одном странице, отвечающем на запросы, с таблицей рабочего стола на 3 столбца, например:

| - | ---- | - |

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

Я довольно опытный, но я не могу придумать отзывчивое решение в HTML/CSS, поскольку это означало бы, что центральный столбец должен быть вне <body>.

Таким образом, для меня единственно реалистичным является решение на основе js, подобное тем плавающим социальным сетям.

Поделитесь своими мыслями по этому поводу.

gfaw 03 март 2014, в 18:36

Источник

0

Это должно помочь - manisheriar.com/holygrail
Ani 03 март 2014, в 17:17
1

Вы можете использовать display: fixed; на левом и правом элементах, или вы можете установить центральный элемент на overflow: scroll пока вы устанавливаете контейнер для всех трех элементов на overflow: none . Последнее решение приведет к тому, что полоса прокрутки появится внутри центрального элемента, а сам элемент останется неподвижным, пока его содержимое прокручивается.
MickelsonMichael 03 март 2014, в 17:19

Теги:

jquery

html

css

responsive-design

singlepage

2 ответа

1

Попробуйте установить левый и правый стиль divs в position: fixed; а затем просто поместите их на место с left,right,top,bottom

csanonymus 03 март 2014, в 16:01

Ещё вопросы

Это должно помочь - manisheriar.com/holygrail
Вы можете использовать display: fixed; на левом и правом элементах, или вы можете установить центральный элемент на overflow: scroll пока вы устанавливаете контейнер для всех трех элементов на overflow: none . Последнее решение приведет к тому, что полоса прокрутки появится внутри центрального элемента, а сам элемент останется неподвижным, пока его содержимое прокручивается.

Ani · Accepted Answer · 2014-03-03T16-00-00.000Z

Здесь Fiddle: http://jsfiddle.net/qndjW/772/

HTML:

<div class="wrapper">
  <div id="content">
    <h3>Main content</h3>
   </div>
 </div>
 <div id="overlay">
   <div class="wrapper">
     <div id="sidebar">
         <h3>Sidebar</h3>
     </div>
     <div id="leftsidebar">
        <h3>Sidebar</h3>
     </div>
   </div>
 </div>

CSS

#content {
   background: #bbb;
   width: 50%;
   margin-left: 25%;
}
#overlay {
   position: fixed;
   top: 0;
   width: 100%;
   height: 100%;
}
#overlay .wrapper {
  height: 100%;
}
#sidebar {
  background: #ddd;
  width: 25%;
  float: right;
  max-height: 100%;
}


#leftsidebar {
  background: #ddd;
  width: 25%;
  float: left;
  max-height: 100%;
 }

Конечно, добро пожаловать .. не забудьте принять ответ