Question

我的网站的主体看起来像这样：

<body>
  <div id="header">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

这些div中没有使用绝对/相对定位技巧，但有很多float s，clear s，margin和{{1}这些padding的样式及其内部元素。所有这些都会产生一个看起来像这样的网站：

div

我的问题是：如何添加一个独立的固定宽度左列（侧边栏），其中包含额外的内容，这些内容可以收缩整个网站（页眉内容页脚）并将它们移到右侧。

┌───────────────┐
│     header    │
└───────────────┘
┌───────────────┐
│    content    │
└───────────────┘
┌───────────────┐
│     footer    │
└───────────────┘

我知道一个几乎理想的解决方案，但它很丑陋，需要重新嵌套现有的div：

┌────┐┌─────────┐
│side││ header  │
│bar │└─────────┘
│    │┌─────────┐
│    ││ content │
│    │└─────────┘
│    │┌─────────┐
│    ││ footer  │
└────┘└─────────┘

是否可以优雅地做到这一点，只需在身体的某处添加一个外部侧边栏元素，即，像那样？

<body>
  <table>
    <tr>
      <td id="sidebar">...</td>
      <td>
        <div id="header">...</div>
        <div id="content">...</div>
        <div id="footer">...</div>
      </td>
    </tr>
  </table>
</body>

我尝试过天真的方法 - 比如造型：

<body>
  <div id="sidebar">...</div>
  <div id="header">...</div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

或

#sidebar { float: left; width: 20em; }

这种方式有效，但在标题/内容/页脚中遇到#header { margin-left: 20em; } #content { margin-left: 20em; } #footer { margin-left: 20em; }或clear: both时就会中断。

那么，表解决方案还有其他选择吗？

Answer 1

我喜欢使用绝对定位的侧边栏，然后将包装上的填充设置为该元素的宽度。然后我要么在其他元素上设置margin-padding，要么将它添加到包装器的padding中。

http://jsfiddle.net/jAVQv/

<div class="container">
    <div id="sidebar"></div>
    <div id="header"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

.container { position:relative; padding:0 0 0 55px; }
#sidebar {
    position:absolute;
    top:0; bottom:0; left:0;
    width:50px;
    background:#000;
}

#header { border:1px solid #000; width:100px; height:20px; 
    margin:0 0 5px 0;
}
#content { border:1px solid #000; width:100px; height:50px;
    margin:5px 0 5px 0;
}
#footer { border:1px solid #000; width:100px; height:20px;
    margin:5px 0 0 0;
}

Answer 2

我使用HTML5元素来赋予标记语义含义。

<body>
  <aside><!-- Nav bar --></aside>
  <article>
    <header>...</header>
    <section>...</section>
    <footer>...</footer>
  </article>
</body>

然后使用aside设置article和float: left样式。

Answer 3

我做了一点jsfiddle来帮助你入门。此外，您可能想要检查您的div内容是否没有弄乱整个CSS。希望这会有所帮助。

编辑：所有颜色和尺寸都是用于示例的虚拟颜色和尺寸。它可以适用于任何方面。

html：

<body>
  <div id="sidebar">...</div>
  <div id="header">
      <div id="testLeft"></div>
      <div id="testRight"></div>
      <div class="clearFix"></div>
  </div>
  <div id="content">...</div>
  <div id="footer">...</div>
</body>

css：

.clearFix {
    clear: both;
}

#sidebar {
    width: 50px;
    height: 30px;
    background-color: green;
    float: left;
}

#header {
    width: 250px;
    background-color: red;
    margin-left: 55px;
}

#testLeft {
    width: 50px;
    height: 50px;
    float: left;
    background-color: pink;
}

#testRight {
    width: 50px;
    height: 50px;
    margin-left: 55px;
    background-color: purple;
}

#content {
    width: 250px;
    height: 20px;
    background-color: blue;
    margin-left: 55px;
}

#footer {
    width: 250px;
    height: 20px;
    background-color: orange;
    margin-left: 55px;
}

HTML布局：将侧栏列添加到现有站点

3 个答案: