我在页面顶部有一个 div (#top)，并在页面底部设置了一个绝对位置 (#bottom)。我在中间有一个 div (#middle) 和一个内部组件 (#middle-inner)。我想增长这个中间组件以填充#top 和#bottom 之间的整个空间，而不改变内部内容的大小（#middle-inner）。我该怎么做？
<html>
<head>
<style>
body {
height:100%;
}
#top {
background-color:purple;
}
#middle {
background-color:green;
}
#middle-inner {
width: 100px;
height:200px;
background-color: red;
}
#bottom {
background-color:blue;
width:100%;
position:absolute;
bottom:0px;
}
</style>
</head>
<body>
<div id='top'>
top
</div>
<div id='middle'>
middle
<div id='middle-inner'>
middle inner
</div>
</div>
<div id='bottom'>
bottom
</div>
</body>
</html>您可以使用
flex<html>
<head>
<style>
html{
width: 100%;
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
margin: 0;
}
#top {
background-color:purple;
}
#middle {
background-color:green;
height: 100%;
}
#middle-inner {
width: 100px;
height:200px;
background-color: red;
}
#bottom {
background-color:blue;
}
</style>
</head>
<body>
<div id='top'>
top
</div>
<div id='middle'>
middle
<div id='middle-inner'>
middle inner
</div>
</div>
<div id='bottom'>
bottom
</div>
</body>
</html>
基本思想是将
htmlbody{
width: 100%;
height: 100%;
margin: 0;
}
这将确保您的内容使用整个窗口大小。 然后我们可以利用
display: flex;display: flex; -> set display to flex
flex-direction: column; -> content flows down in 1 column (defaults to row)
justify-content: space-between; -> push all the divs to fill the space, which leaves white gaps (will adjust #middle to fix this)
现在调整
#middleheight: 100%;