使用固定邊欄和標題的CSS 100％佈局

我正在研究具有固定邊欄和麪包屑標題的網頁設計，以及佔用剩餘空間的可滾動內容部分。下面是我設想最終的結果看起來像：使用固定邊欄和標題的CSS 100％佈局

Layout Mockup

衝突是，我無法弄清楚如何使不討厭的容器<div> S或哈克CSS這項工作。我喜歡語義HTML（HTML5，針對這個特定的項目），所以我並不想讓樣式元素脫離標記。

邊欄將有兩個固定的寬度（展開和摺疊），並且標題將始終具有固定的高度。

這是（實際上）我怎麼想的標記看：

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

來源

2011-02-17 Adam Maras

到目前爲止你有什麼CSS？ – TNC 2011-02-17 01:34:42

我修改了我的帖子。 – 2011-02-17 01:42:32

`html body {` - 你預計在``標籤外的某個地方有``標籤嗎？ – drudge 2011-02-18 20:48:10

-1

你應該在「旁邊」和「部分」元素之間放置「nav」元素。然後這應該做的伎倆（添加更多的內容到「文章」元素來觸發滾動條）：

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

來源

2011-02-18 18:44:49

最好的辦法是使用CSS。這完全是關於職位的東西。你不必使用div，但是它比將你所做的所有事情分配給class或id要好得多。下面的代碼會讓你的邊欄留在一個地方，併爲內容，只是讓它漂浮的權利。我覺得你很好走

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

來源

2011-02-17 01:46:35 khuderm

使用固定邊欄和標題的CSS 100％佈局

回答

相關問題