不调整大小以适应内容

时间:2014-05-04 13:16:44

标签: css html height

我有一个包装器div,它包含一个标题,导航栏和一个内容div。当内容扩展时,我希望包装器div随之扩展,但它目前不会这样做。换句话说,我希望内容的边缘保留在包装器div中。一旦内容div扩展到超出屏幕高度,我需要滚动条出现在窗口边缘的边缘。

我的css:

* {
    margin: 0px;
    padding: 0px;
}

html, body {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

body {
    background-image: url(../Images/background1.jpg);
    background-size: cover;
    min-width:1000px;
    background-repeat: no-repeat;

}

#wrapper1
{
    height: 100%;
    width: 94%;
    margin-left: auto;
    margin-right: auto;
    background-color: #006699;
    position: relative;
    overflow: hidden;
}


#wrapper 
{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}

#header, #nav, #content 
{
    width: 94%;
    margin-left: auto;
    margin-right: auto;
}

#header
{
    height: 15%;
    background-color: Red;
}

#nav
{
    height: 2%;
    min-height: 35px;
    background-color: Yellow;
}

#content 
{
    height: 100%;
    background-color: brown;
}

HTML:

<body>

    <div id="wrapper">

        <div id="header"></div>

        <div id="nav"></div>

        <div id="content">

        </div>

    </div>

</body>

http://jsfiddle.net/VB3PM/

2 个答案:

答案 0 :(得分:1)

试试这个:

<style type="text/css">
html,
body
{
    height:100%;
}
#wrapper
{
    position:relative;
    min-height:100%;
}
</style>
<div id="wrapper">

    <div id="header"></div>

    <div id="nav"></div>

    <div id="content">

    </div>

</div>

答案 1 :(得分:0)

如下所示将#wrapper的溢出CSS属性从隐藏更改为自动

    #wrapper 
{
    height: auto !important;
    min-height: 100%;
    height: 100%;
    position: relative;
    overflow: auto;
}