只有网站中心滚动主滚动条 [英] only center of website scrolling with main scrollbar

问题描述

你好..我是web开发和设计的新手。我想制作一个页面，其中只有页面的中心滚动主滚动条并且背景是固定的。检查这个网站以获得更清晰的想法 http://www.thefilterbubble.com/10-things-you-can-do [ ^ ]。

主中心div也应该有页眉和页脚的位置。请分别给我html和css代码。

解决方案

虽然你的Gizmodo示例使用其他脚本来处理（侧栏的垂直滚动条）（甚至在所有浏览器中都不起作用），使用纯CSS可以完美地实现效果，它甚至不像初看起来那么困难。



所以你想：



水平居中的布局，可能会加宽或缩小针对不同的浏览器窗口大小编辑，

左侧的主要内容可以通过浏览器的主滚动条垂直滚动，

右边的一个侧边栏位于顶部浏览器窗口，可以与主要内容分开滚动，并且只在鼠标悬停时显示其滚动条。当滚动到侧边栏的末尾时，窗口的滚动条接管。



CSS：

  html ， body ， *  {
  padding  ：  0;  
  margin  ：  0;  
} 
。包装器 {
  min-width  ：  500px;  
  max-宽度 ：  700px;  
 保证金 ：  0 auto;  
} 
＃ content  {
  margin-right  ：  260px;   / *   =侧边栏宽度+一些空格* /  
} 
＃ overlay  {
  position  ： 已修复;  
  top  ：  0;  
  width  ：  100％;  
  height  ：  100％;  
} 
＃ overlay 。 wrapper  {
 身高 ：  100％;  
} 
＃ 侧栏 {
  width  ：  250px;  
  float  ：  right;  
  max-height  ：  100％;  
} 
＃侧栏：悬停 {
  overflow-y  ：  auto;  
} 
＃sidebar> * {
  max-width  ： < span class =code-keyword> 225px;   / *  为垂直s留一些空间crollbar * /  
} 

加价：

 <   div     class   =  wrapper >  
 <   div     id   = 内容 >  
 <   / div  >  
 <   / div  >  
 <   div     id   = 叠加 >  
 <   div     class   =  包装 >  
 <   div     id   = 侧栏 >  
 <   / div  >  
 <   / div  >  
 <   / div  >  

 测试    Win7     IE7 ， IE8 ， IE9 ，  Opera   11 。 50 ， Safari   5 。 0 。 5 ， FF   5 。 0 ， Chrome   12 。 0 。 
 
 我 假设  a  流体  width   for     main   content  和  a   static   width   for     sidebar ，< span class =code-leadattribute>但是     完美    fluid ， as  你 喜欢。 如果 您 想要  a   static   width ，然后 参见 此 演示 小提琴   使   标记 更多 简单 

hello.. i am new in web development and designing.I want to make a page in which only the center of the page is scrolling with main scrollbar and the background is fixed.check this website for more clear idea http://www.thefilterbubble.com/10-things-you-can-do[^].
The main center div should also have place for header and footer as well.Please give me html and css code separately.

解决方案

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

So you want:

A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
The main content at the left which is vertically scrollable by the browser's main scroll bar,
A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.

CSS:

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

Markup:

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.

这篇关于只有网站中心滚动主滚动条的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！