我有一个包装器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>
答案 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;
}