為什麼這篇CSS 垂直 填 滿鄉民發文收入到精華區：因為在CSS 垂直 填 滿這個討論話題中，有許多相關的文章在討論，這篇最有參考價值！作者rld3 (羅蘭)看板Web_Design標題[問題] css排版問題-垂直延伸填滿卻超出父元素...
想請問就是我正在練習css的排版
但一直遇到一個問題就是
HTML部分：
<div class="content">
<div class="main"></div>
<div class="sidebar">
<div class="sidebar_top>top</div>
<div class="sidebar_middle">middle</div>
<div class="sidebar_"bottom">bottom</div>
</div>
</div>
css部分：
.content {
position: relative;
width: 940px;
margin: 10px 0px;}
.content .sidebar {
position: absolute;
width: 300px;
height: 100%;
float:left;}
.content .sidebar .sidrbar_top {
position: static;
background:url(images/top.png) no-repeat;
height:20px;}
.content .sidebar .sidebar_middle {
position: static;
width: 260px;
height: 100%;}
.content .sidebar .sidebar_bottom {
position: static;
background:url(images/bottom.png) no-repeat;
height:20px;}
問題在於top middle bottom三欄加給來所呈現的會超出sidebar
有沒有什麼辦法可以讓所有欄位都在sidebar裡面，又可以垂直延伸middle的部份
圖片在這http://ppt.cc/_GQ9
白色是content
藍色是sidebar
綠色是sidebar_middle，上下個是top跟bottom
有辦法把凸出來的包進去嗎？
ps.這是在mac底下做的，用safari跟ff都是一樣效果。
先謝謝大家看完ㄒㄒ
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 219.84.131.207
推 superpai:不要加height 讓div自己包住 11/04 10:56
→ rld3:我取消了height但卻沒辦法延伸middle的空間到底耶... 11/04 14:34
→ robert38:我比較好奇同時設float和position:absolute的用意是...? 11/05 12:45
→ meano:middle的高去掉就正當了。延申到底，是說讓top貼著上， 11/05 16:05
→ meano:bottom貼著下，middle隨視窗不同延伸嗎? 11/05 16:06
→ meano:上上行字打錯，是「正常」 11/05 16:06
→ rld3:re:robert38:應該是我測試到一半沒仔細校對 11/10 04:48
→ rld3:middle的高去掉若內容不足似乎也不會延伸.. 11/10 04:49