HTML

Question

我有一个侧边栏，它只占用足够 space 的内容来容纳它包含的内容，而不是占用 100% 的包含所有元素的包装，下图应该明白我的意思：

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

<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;
}

Answer 1

这对我有用：

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

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

Answer 2

> #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;
}

HTML - 边栏未填满 100% 的屏幕

HTML - Sidebar not filling 100% of screen

html

css

sidebar

HTML

CSS