我有一个包含标题、导航栏和内容 div 的包装器 div。当内容扩展时，我希望 wrapper 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>
最佳答案
试试这个:
<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>
关于css - Div 未调整大小以适合内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23456697/