14

我有一个身体看起来像这样的网站：

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

在这些s中没有使用绝对/相对定位技巧，但是在这些s及其内部元素的样式中div有很多floats，clears，margins和s。所有这些都产生了一个看起来像这样的网站：paddingdiv

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

我的问题是：如何添加一个独立的固定宽度左栏（侧边栏）和额外的内容，这些内容会收缩整个网站（页眉内容页脚）并将它们向右移动。

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

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

<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或clear: left在页眉/内容/页脚中遇到。

那么，表解决方案有什么替代方案吗？

4

3 回答 3

13

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

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;
}
于 2013-08-09T13:57:47.997 回答
6

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

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

然后 styleaside和articlewith float: left。

于 2013-08-09T14:02:15.127 回答
2

我做了一个小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;
}
于 2013-08-09T13:58:38.423 回答