將DIV對接到屏幕一側

我正在嘗試創建側邊欄。那麼，設計應該是3格。標題（已完成），側邊欄和主分區。將DIV對接到屏幕一側

側邊欄旨在位於屏幕的左側，一直延伸至底部（高度：100％）。我堅持的問題是我無法制作100％Div，因爲它的高度只能擴展到我在div中的文本行數。

這裏是我目前擁有的側邊欄的CSS：

#sidebar { 
    float: left; 
    margin-top:36px; 
    width: 300px; 
    height:100%; 
    background-color: #111211; 
}

這裏是我目前擁有的身體CSS代碼：

body { 
    margin:0; 
    padding:0px; 
    background-color:#87AFC7; 
}

下面是HTML代碼：

<body> 
    <div id="sidebar"> left-sidebar </div> 
</body>

來源

2012-08-09 DemCodeLines

您需要將邊欄的父級高度設置爲100%，並在t那是父母。由於側邊欄是body元素的直接孩子，只是添加到您的CSS：

html,body { height:100%; }

來源

2012-08-09 04:09:16 Purag

您可以使用像素而不是百分比：

height:1000px;

來源

2012-08-09 04:29:35

您可以嘗試類似;

CSS

#container { 
    top: 0px; 
    bottom: 0px; 
    left: 0px; 
    right: 0px; 
} 
#top, #left, #right { 
    position: absolute 
} 
#top { 
    top: 0; 
    width: 100%; 
    height: 50px; 
    background: #00b7f0 
} 
#left { 
    top: 50px; 
    width: 50px; 
    bottom: 0px; 
    background: #787878 
} 
#right { 
    top: 50px; 
    left: 50px; 
    right: 0; 
    bottom: 0px; 
    background: #ff7e00 
}

HTML

<div id="container"> 
    <div id="top"></div> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

Here是一個工作現場演示。

希望這有助於..

來源

2012-08-09 05:57:29

請試試這個，讓我知道

#sidebar { 
    position:fixed; 
    right:0px; 
    margin-top:36px; 
    width: 300px; 
    height:100%; 
    background-color: #111211; 
} 

body, html { 

hieght:100% 

}

來源

2012-08-09 06:12:30 Carlos

將DIV對接到屏幕一側

回答

相關問題