Question

如果您的网页覆盖整个屏幕，则左侧和右侧有一些区域，其中不包含任何内容。如果你使页面变小，它们会变小，当你移动它时，实际网页会保持居中，直到条形图消失，此时它将停止移动。（这个网站包含那些酒吧）我抬头看了如何制作侧边栏，但我找到的资源都包含不会消失的侧边栏或导航栏。（我不想要导航栏）

Answer 1

你的问题有点模糊，但在大多数情况下，你有一个两列固定宽度的布局，它被包装在一个容器中。该容器通常以具有固定宽度的页面为中心。

<div id="container">
  <div id="left-column">Left Column</div>
  <div id="right-column">Right Column</div>
</div>

在这种情况下，容器div上的margin：0 auto是div的中心。您可以使用min-width来确保容器div不会低于特定大小，如果您使用基于百分比的布局，这将是很好的。 CSS看起来像这样:(请注意，我已经给它高度和颜色以使其清晰）。

#container {
  margin:0 auto;
  width:300px;
  min-width:300px;    
}

#left-column {
  float:left;
  background-color:green;  
  width:230px;
  height:200px;    
}

#right-column {
  float:right;
  background-color: red;
  width:70px;
  height:200px;    
}

这是demo。

Answer 2

Dustin Diaz曾经对这个问题有一个非常灵活的答案 - 但他的网站似乎已经失效（http://www.dustindiaz.com/centering-a-webpage/）

无论如何，您可以通过在您的身体上添加此css而无需任何额外标记来居中网页：

body { 
    margin:0 auto;
    width:760px;
    /* adjust width as needed */
}

所有归功于达斯汀。

Answer 3

当您找到符合要求的网站时，您可以使用浏览器附带的工具查看其工作原理。例如，在IE和Chrome上，按F12将显示所有内容 - HTML，javascript，CSS等。

如果您在理解方面遇到特殊影响，请返回一个网址，我们会帮助您了解详情。

如何创建大多数网站上的通用侧边栏？

3 个答案: