使容器div高度和背景颜色随内容扩展

时间:2012-10-02 19:31:43

标签: html css

首先,我已经调查了所有选项,你们会说我没有,但我有:) 我只是想不出来。白色背景不会随着子div的扩展而扩展。

这是css

    #container{
        position: relative;
        background-color: #FFF;
        width: 900px;
        height: auto;
        margin-top: 50px;
        margin-right: auto;
        margin-bottom: 0;
        margin-left: auto;
        border: 2px solid #FFF;

        }
#banner {
    height: 60px;
    width: 900px;
    background-color: #CFF;
    color: #F00;
    }
#menu{
    position: absolute;
    top: 59px;
    height: 150px;
    left: -2px;
    width: 100px;
    border: 2px solid #FFF;
    color:      #250517;
    background-color:   #6D6968;
    }
#menulogin{
    position: absolute;
    top: 209px;
    height: 100px;
    left: -2px;
    width: 100px;
    border: 2px solid #FFF;
    color:      #250517;
    background-color:   #6D6968;
    }
table {
    border: none;
    }
#content {
        position: absolute;
    height: auto;
    left: 105px;
    width: 789px;
    text-align:left;
    padding-left: 5px;
    }

这些是div:

<body>
<div id="container">
    <div id="banner"> Dit is de <strong>BETA</strong> van roekoerace.be! </div>
    <div id="menu">
        <table width="100" border="" cellspacing="2" cellpadding="0">
    <tr>
    <td><a href="../login.php">Login</a></td>
    </tr>
    <tr>
    <td><a href="../index.php">Profiel</a></td>
     </tr>
    <tr>
    <td><a href="../duifkes.php">Duiven</a></td>
    </tr>
    <tr>
    <td>Wedstrijden</td>
    </tr>
    <tr>
    <td>Training</td>
    </tr>
    <tr>
    <td>Markt</td>
    </tr>
    </table>
    </div>
  <div id="menulogin"><!-- TemplateBeginEditable name="LoginMenu" --><!-- TemplateEndEditable --></div>
    <div id="content"><!-- TemplateBeginEditable name="Inhoud" --><p>&nbsp;</p><!-- TemplateEndEditable -->
    </div> 
</div>
</body>

1 个答案:

答案 0 :(得分:0)

我认为这可能有助于您尝试做的事情......看看它,如果您的问题仍然包含在内,请更新您的问题。

http://jsfiddle.net/rj5by/