簡體   English   中英

CSS 100%布局,帶有固定的側邊欄和標頭

[英]CSS 100% layout with fixed sidebar and header

我正在研究一種具有固定側邊欄和面包屑標題以及可滾動內容部分占用剩余空間的Web設計。 這是我設想的最終結果,如下所示:

布局樣機

問題是,如果沒有討厭的容器<div>或駭人的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;
}

最好的選擇是使用CSS。 這都是關於職位的東西。 您不必使用div,但這比為您制作的所有內容分配類或ID更好。 下面的代碼將使側邊欄停留在一個位置,對於內容,只需使其向右浮動即可。 我覺得你很好

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

您應該將“ nav”元素放置在“ aside”和“ section”元素之間。 然后,這應該可以解決問題(向“文章”元素添加更多內容以觸發滾動條):

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

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM