Question

我需要一些关于网站设计的建议，是否以及如何实现。

好的，客户想象有一个单页/一页的响应式网站，其中包含3列桌面布局：

| - | ---- | - |

当中心柱滚动而其余部分保持在适当位置时。左栏还应包含某种导航菜单，而右栏则包含联系信息。

我很有经验，但我无法想到HTML / CSS中的响应式解决方案，因为这意味着中心列必须在<body>之外。

所以对我来说，唯一现实的是基于js的解决方案类似于那些浮动的社交媒体面板。

请分享您的想法。

Answer 1

尝试将左右div格式设置为position : fixed;，然后使用left,right,top,bottom

将它们放置到位

Answer 2

这里小提琴： 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%;
 }

不寻常的3列单页网站 - 只是中心列滚动

2 个答案: