Question

我正在开发一个具有固定侧边栏和面包屑标题的网页设计，以及占用剩余空间的可滚动内容部分。这就是我设想的最终结果：

Layout Mockup

问题是，我无法弄清楚如何在没有讨厌的容器<div>或hacky CSS的情况下完成这项工作。我喜欢语义HTML（HTML 5，对于这个特定的项目），所以我真的不想让样式元素不在标记之内。

侧边栏将有两个固定宽度（展开和折叠），标题始终具有固定高度。

这（基本上）我希望标记看起来如何：

<body>
    <aside>
        <!-- sidebar content -->
        <h1>My Site</h1>
    </aside>
    <section>
        <nav>
            <!-- breadcrumbs -->
            <a href="#home">Home</a>
            <a href="#area">Area</a>
            <a href="#category">Category</a>
            <a href="#">Item</a>
        </nav>
        <article>
            <!-- page content -->
            <h2>Item Title</h2>
            <p>
                Item Content
            </p>
        </article>
    </section>
</body>

有人可以帮我制作CSS吗？

编辑：到目前为止我的CSS：

html {
    font-family: "Segoe UI", sans-serif;
    font-size: 9pt;
    height: 100%;
}
html body {
    margin: 0px;
    height: 100%;
    padding: 0px;
}
html body aside {
    background-color: rgb(32, 80, 128);
    float: left;
    height: 100%;
    width: 256px;
}
html body section {
    background-color: rgb(16, 40, 64);
    height: 100%;
    margin-left: 256px;
}
html body section nav {
    background-color: rgb(242, 242, 242);
    height: 32px;
}
html body section article {
    background-color: rgb(255, 255, 255);
    margin: 0px 32px 32px 32px;
}

Answer 1

最好的选择是使用CSS。这都是关于职位的问题。您不必使用div，但它会比为您所做的一切分配类或ID要好得多。下面的代码将使您的侧边栏保持在一个位置，对于内容，只需使其浮动正确。我觉得你很高兴

position: fixed; /*--Fix the sidenav to stay in one spot--*/
float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/

Answer 2

您应该将“nav”元素放在“aside”和“section”元素之间。然后这应该做的伎俩（向“article”元素添加更多内容以触发滚动条）：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <style type="text/css">
      * {margin:0;padding:0;}
      aside,section,nav,article {display:block;}
      body {background: rgb(16, 40, 64);}
      html,body,aside {overflow:hidden;height:100%;}
      aside {background: rgb(32, 80, 128);float:left;width: 256px;}
      section {position:relative;margin:0 -256px 0 256px;overflow:auto;}
      nav {background: rgb(242, 242, 242);height: 32px;}
      article {background: rgb(255, 255, 255);margin:32px;}
    </style>
  </head>
  <body>
    <aside>
      <!-- sidebar content -->
      <h1>My Site</h1>
    </aside>
    <nav>
      <!-- breadcrumbs -->
      <a href="#home">Home</a>
      <a href="#area">Area</a>
      <a href="#category">Category</a>
      <a href="#">Item</a>
    </nav>
    <section>
      <article>
        <!-- page content -->
        <h2>Item Title</h2>
        <p>Item Content</p>
      </article>
    </section>
  </body>
</html>

CSS 100％布局，带有固定的侧边栏和标题

2 个答案: