HTML - 补充工具栏不能填充100％的屏幕

时间：2015-06-04 16:21:26

标签： html css sidebar

我有一个侧边栏，它只占用了它所包含内容的足够空间，而不是占用包含所有元素的100％包装器，下面的图片应该符合我的意思：

enter image description here

以下是我正在使用的一些代码：

HTML

<body>

    <div id="wrapper">

        <div id="top">
            ...
        </div>

        <div id="topnav">
            <...
        </div>

        <div id="banner">
            <img id="img" src="images/2for20.png" alt="banner1" />
        </div>

        <div id="subbanner">
            ...
        </div>

        <div id="content">
            ...
        </div>

        <div id="rightSide">
            <p>This is the sidebar</p>  
        </div>

        <div id="footer">
            <p>© Copyright 2015 Celtic Ore, All Rights Reserved</p>
        </div>  

    </div>

</body>

CSS

#wrapper
{
    width:1000px;
    height:100%;
    margin:0px auto;
    background-color:#efefef;
}

#rightSide
{
    float:right;
    position:relative;
    width:220px;
    height:100%;
    background-color:#efefef;
}

#rightSide img
{
    vertical-align:middle;
}
#rightSide h2
{
    padding:10px 0px;
}

#rightSide p
{
    padding:10px 0px;
}

#footer
{
    width:100%;
    padding: 10px 0px;
    background-color:#000000;
    float:left;
}

#footer p
{
    color:white;
    text-align:center;
}

2 个答案:

答案 0 :(得分：0)

这对我有用：

.container { 
  overflow: hidden; 
  .... 
} 

#sidebar { 
  margin-bottom: -101%;
  padding-bottom: 101%; 
  .... 
}

答案 1 :(得分：0)

> #wrapper
{
    width:100%;  //change this to 100%
    height:100%;
    margin:0px auto;
    background-color:#efefef;
}

#rightSide
{
    float:right;
    position:relative;
    width:100%; //Change this to 100%
    height:100%;
    background-color:#efefef;
}

#rightSide img
{
    vertical-align:middle;
}
#rightSide h2
{
    padding:10px 0px;
}

#rightSide p
{
    padding:10px 0px;
}

#footer
{
    width:100%;
    padding: 10px 0px;
    background-color:#000000;
    float:left;
}

#footer p
{
    color:white;
    text-align:center;
}