CSS HTML如何使側邊欄高度連接到頁腳

-2

我想在側邊欄高度爲「100％」的代碼頁 - 連接頁腳。有這樣的圖像： enter image description here CSS HTML如何使側邊欄高度連接到頁腳

我做了它使用絕對div，但我不滿意這種效果。我寫得很糟糕。你能給我一些代碼/建議如何編碼？

來源

2014-12-27 user2209414

請發佈您已經嘗試過的代碼。 – Brian 2014-12-27 14:26:33

'table-cell'或'flex' – Leo 2014-12-27 14:28:00

這不是一個真正的問題，但你應該檢查這個http://css-tricks.com/fluid-width-equal-height-columns/ – hiero 2014-12-27 14:40:56

你可以使用CSS與display:table-cell這樣

header { 
 
} 
 

 
section { 
 
    display: table; 
 
    width: 400px; 
 
    min-height: 200px; 
 
} 
 

 
aside { 
 
    display: table-cell; 
 
    width: 120px; 
 
    background-color: green; 
 
} 
 

 
article { 
 
    display: table-cell; 
 
    background-color: blue; 
 
    width: *; 
 
} 
 

 
footer { 
 
}

<header> 
 
    Header 
 
</header> 
 
<section> 
 
    <aside> 
 
    sidebar 
 
    </aside> 
 
    <article> 
 
    lorem ipsum... 
 
    </article> 
 
</section> 
 
<footer> 
 
    Footer 
 
</footer>

來源

2014-12-27 14:25:12 Niels

它不能正常工作。看看我上面編輯的帖子。 – user2209414 2014-12-27 18:36:26

如果你想要紅色條出現，如果它一直走到頁腳，你可能可以更好地使用css中的背景漸變來獲得所需的效果。 – Niels 2014-12-30 09:16:07

2015年很快會來到，人。試試Flexible Box Layout。現在是supported by all major browsers。如果您發現W3C規範很難閱讀，this article可能會給您一個快速教訓。

html, body { 
 
    margin: 0; 
 
    height: 100%; 
 
    display: flex; 
 
    flex-direction: column; 
 
} 
 
header { 
 
    height: 50px; 
 
    background: #ddd; 
 
} 
 
section { 
 
    flex: 1; 
 
    display: flex; 
 
} 
 
aside { 
 
    width: 100px; 
 
    background: lightgreen; 
 
} 
 
article { 
 
    flex: 1; 
 
    background: lightblue; 
 
} 
 
footer { 
 
    height: 40px; 
 
    background: #ddd; 
 
}

<header>header</header> 
 
<section> 
 
    <aside>sidebar</aside> 
 
    <article>body</article> 
 
</section> 
 
<footer>footer</footer>

來源

2014-12-27 14:37:13 Leo

你能解釋一下它究竟做了什麼？ w3手冊很難閱讀。 – 2014-12-27 14:41:37

@JuanRocamonde代碼幾乎是自我解釋的。如果你覺得很難理解，但不想閱讀規範，[**這篇文章**]（http://css-tricks.com/snippets/css/a-guide-to-flexbox/）可能有幫助。 – Leo 2014-12-27 14:48:47

非常感謝您的幫助 – 2014-12-27 14:49:19

我的代碼（簡化）：http://jsfiddle.net/L4k9gwqw/

<body> 
    <div id="wrapper"> 
     <header> 
      Header 
     </header> 
     <section> 
      <aside> 
       Here<br />is<br />Side<br /> 
      </aside> 
      <article> 
       Content here<br /><br /><br /><br /><br /><br /><br /><br /><br /> 
       <br /><br /><br />Dynamic height 
      </article> 
      <div style="clear:both;"></div> 
     </section> 
     <footer> 
      Footer 
     </footer> 
    </div> 
</body> 

html, 
body { 
    margin:0; 
    padding:0; 
    height:100%; 
} 
#wrapper { 
    min-height:100%; 
    position:relative; 
} 
header { 
    background:#5ee; 
    width: 800px; 
    height: 200px; 
    margin: 0 auto; 
} 
section { 
    padding-bottom:80px; /* Height of the footer element */ 
    border: 1px dashed red; 
    width: 800px; 
    margin: 0 auto; 
} 
aside { 
    background: #70ee83; 
    width: 250px; 
    float: left; 
} 
article { 
    width: 540px; 
    float: right; 
    background: orange; 
} 
footer { 
    width:100%; 
    height:80px; 
    position:absolute; 
    bottom:0; 
    left:0; 
    background:#ee5; 
}

我在這裏使用this code for footer always bottom。我希望側邊欄（旁邊）總是與頁腳連接，但內容（文章）不一定。

**編輯：** display: table和display: table-cell爲部分和一邊&文章不工作。我想得到這個效果：。我不知道如何編寫這個紅色菜單，從頁腳開始，結束於旁邊。

來源

2014-12-27 18:13:04 user2209414

CSS HTML如何使側邊欄高度連接到頁腳

回答

相關問題