css 剩余空间,CSS DIV高度撑满剩余空间

页面高度为百分百情况下，内容div实现自动撑满剩下的位置头部区域高度为110rpx，内容区域div实现自动撑满剩下的位置。

如果将div 高度设置为100%，会造成多出头部的110rpx,会有滚动条显示！.content{

width: 100%;

height: 100%;

box-sizing: border-box;

position: relative;

.search_box{

position: relative;

box-sizing: border-box;

width: 100%;

height: 110rpx;

border: 1px solid red;

}

.list{

width: 100%;

height: 100%;

box-sizing: border-box;

border: 1px solid green;

}

此时我们不需要滚动条方法一、绝对定位,将list css修改为。.list{

width: 100%;

box-sizing: border-box;

border: 1px solid green;

position: absolute;

top: 110rpx;//头部高度

left: 0;

bottom: 0;

}

此时已经实现无滚动条效果

方法二、利用 padding-top 和 margin-top ，将 margin-top 设置为负值。.content{

width: 100%;

height: 100%;

padding-top: 110rpx;

box-sizing: border-box;

position: relative;

.search_box{

position: relative;

box-sizing: border-box;

margin-top: -110rpx;

width: 100%;

height: 110rpx;

border: 1px solid red;

}

.list{

width: 100%;

box-sizing: border-box;

border: 1px solid green;

height: 100%;

}

}同样达到效果

css 剩余空间,CSS DIV高度撑满剩余空间相关推荐

css布局，让侧边栏高度撑满，并且不会随着屏幕内容滚动
一.需求要让左侧边栏固定,并且不会随着页面的滚动向上滚动,侧边栏内容如果超出,可以显示滚动条二.实现原理设置布局:position: fixed 设置overflow-y: scroll 三.效 ...
如何将div高度填满剩余高度
下列代码中navbar高度为30px,content高度需要填满浏览器的剩余高度 <div id="body"> <div id="navbar&quo ...
固定大小容器内，不同比例的图片高度撑满，宽度居中裁剪
在一个商品展示列表中,一个需求是在一个正方形的方块中,按原比例展示商品图片,但是图片比例不定,需要居中显示,高度撑满,宽度多余的隐藏. 结构: imgOuter是固定容器,宽高都是120px: CSS ...
如何div高度占满全屏无滚动条
如何div高度占满全屏无滚动条 <!DOCTYPE html> <html><head><meta charset="UTF-8"> ...
HTML变列自适应布局三行,CSS三行三列DIV高度自适应的设置
上一篇博客里引用了www.52css.com里的一篇关于使用脚本控制三行三列div高度自适应的设置方法,其实不必如此麻烦,只要给父div设置一个固定高度,比如10px,其子div的height:100 ...
CSS设置盒子容器(div)高度(height)始终为100%
前言有时需要让一个盒子容器的高度始终保持100%,无论怎么缩放浏览器高度始终不变.就像一些网站的侧边栏,但直接设置盒子容器的高度为100%是不起作用的. demo 如果想让一个元素的百分比高度he ...
微信小程序页面除去头部和底部，中间高度铺满剩余部分的解决方案
做这么一个界面,让中间紫色和橙色部分的内容铺满在中间位置,并且让橙色部分位置固定不动,紫色部分内容超出时滚动,如图: 首先如何做到呢? 我使用了定位position:fiexed;让它撑满(关键代码) ...
css实现左边div固定宽度，右边div自适应撑满剩下的宽度
(1)使用float <div class="use-float"><div></div><div></div> < ...
DIV自动填满剩余空间
参考:http://bbs.blueidea.com/thread-2773197-1-1.html 效果: 代码: <!DOCTYPE html PUBLIC "-//W3C//DT ...

css 剩余空间,CSS DIV高度撑满剩余空间

css 剩余空间,CSS DIV高度撑满剩余空间相关推荐

最新文章

热门文章