javascript - 如何创建像大多数网站上那样的通用侧边栏？

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 .