CSS 100% layout with fixed sidebar and header_问答_开发者

CSS 100% layout with fixed sidebar and header

开发者 https://www.devze.com 2023-02-10 18:57 出处：网络

I\'m working on a web design that has a fixed sidebar and breadcrumb header, and a scrollable content section taking up the remaining space. Here\'s what I envision the end result looking like:

相关专题：css

I'm working on a web design that has a fixed sidebar and breadcrumb header, and a scrollable content section taking up the remaining space. Here's what I envision the end result looking like:

CSS 100% layout with fixed sidebar and header

The rub is, I can't figure out how to mak开发者_如何学编程e this work without nasty container <div>s or hacky CSS. I like semantic HTML (HTML 5, for this specific project) so I don't really want to budge on keeping styling elements out of the markup.

The sidebar will have two fixed widths (expanded and collapsed) and the header will always have a fixed height.

This is (essentially) how I'd like the markup to look:

<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>

Can someone help me make the CSS work for this?

Edit: My CSS thus far:

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;
}

The best bet would be to use CSS. It is all about positions n' stuff. You don't have to use divs but it will be much better than assigning classes or ids to everything you make. Code below will make your sidebar stay at one place and for the content, just make it float right. I think you're good to go

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

You should position the "nav" element between the "aside" and "section" elements. Then this should do the trick (add more content to the "article" element to trigger the scrollbar):

<!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>