让最后一个div的高度自动填满浏览器窗口剩余部分
作者:互联网
让最后一个元素占满当前视口的剩余空间,缩放浏览器窗口也没影响。
HTML
<div class="container"> <div>Div 1</div> <div>Div 2</div> <div>Div 3</div> </div>
CSS
html,body { height: 100%; margin: 0; } .container { height: 100%; display: flex; flex-direction: column; } .container > div:last-child { background-color: tomato; flex: 1; }
代码说明
1. height: 100% 将容器高度设置为视口高度。
2. display: flex 启用flexbox布局。
3. flex-direction 设置flex条目的方向为从顶部到底部。
4. 设置最后一个元素的 flex-grow: 1 使其可以占满容器的剩余可用空间。
5. 父元素必须有视口高度。flex-grow: 1 也可以作用于第一个或第二个元素。
标签:flex,填满,浏览器,100%,元素,高度,height,div,Div 来源: https://www.cnblogs.com/yingshiyv/p/14008913.html