将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对接到屏幕一侧

回答

相关问题