扫码关注官方订阅号
问个问题 css怎么样让箭头指向的区域自动占据body下面余下的部分A?
多张券的时候是这样
问题是券少的时候!A处是白色的 我想让A和B一样的颜色
我看了flex的 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。但是用不起来!!
闭关修行中......
不太容易(至少不是你想的那样,给某个元素加个heigth:100%,它就能自撑满剩下的高度),如果是
<body> <header></header> <section></section> <footer></footer> </body>
这样的层级浅的,倒是可以通过min-height:100%;来实现你想要的效果,很显然,楼主所说的箭头所指的那个p至少是在section下的子元素,也就是说至少是body的孙子,所以说,单纯的用css设置该p样式是无法实现的,你至少得通过设置section的高度为min-height:100%;同时扣除该p的同级元素的高度,比如他前面的同级元素占了大概50%,那么你也只能设置height:50%,而很显然,他前面的那些元素,比如图片轮播框,选项框等元素的高低肯定不是用百分比实现的,所以这样设置并不能达到效果,那么你可以换种方式,通过获取前面元素的所占高度之和,用总的屏幕高度来减去该值,然后用得到的值来设置目标p的高度(不知道我的意思你明白不?),即用js来获取p的父元素的高度(屏幕的高度),然后减去前面同级元素高度之和,再设置目标元素的高度值。当然,如果你觉得麻烦,就试试用vh属性来设置吧,即相对于视界高度值(类似于百分比)的单位。这其实和你把所有元素的宽高设置为百分比是差不多的意思(你可以详细去看一下手册上vh,vw属性)。
body加个背景色
width: 100%; position: absolute; top: 距离最上边的距离px; bottom: 距离最下边的距离px; left: 0px;
不清楚页面结构和有什么别的限制吗。看着改吧
absolute性质的盒子,它的包含块的高度等于它的盒模型(margin、padding、border、height)的高度 + top + bottom值。宽同理。
设置了 margin、padding、border、top 、bottom,高度不就自动占满包含块了吗。补充,看你的需求,加给灰色块吧。或者干脆写个灰的背景色。
是想让灰色的那块区域,占满剩下的所有空间吧。1:用calc2:用flex布局3:用vh
给 margin、padding、border、top 、bottom设置不同的值进行调试。
多一个p包裹,背景色设为红色
body加个背景色。或者你的p设置一个min-height。
我的思路是,直接把下边的内容区域底色设成暖灰,内容区域设置下padding-top;然后“洗车券”width给个90%左右,margin-left和margin-right设置auto,再用margin-bottom(同父元素padding-top)挤开下一个券,最后“洗车券”的::befour和::after分别做锯齿的抬头纹和红色底边,应该就差不多了。
已经解决 body html给百分百 然后容器给一个min-height就好了
只有一张洗车券的话,洗车券那里大小不变,自动下沉到底部吗?
微信扫码关注PHP中文网服务号
QQ扫码加入技术交流群
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
PHP学习
技术支持
返回顶部
不太容易(至少不是你想的那样,给某个元素加个heigth:100%,它就能自撑满剩下的高度),如果是
这样的层级浅的,倒是可以通过min-height:100%;来实现你想要的效果,很显然,楼主所说的箭头所指的那个p至少是在section下的子元素,也就是说至少是body的孙子,所以说,单纯的用css设置该p样式是无法实现的,你至少得通过设置section的高度为min-height:100%;同时扣除该p的同级元素的高度,比如他前面的同级元素占了大概50%,那么你也只能设置height:50%,而很显然,他前面的那些元素,比如图片轮播框,选项框等元素的高低肯定不是用百分比实现的,所以这样设置并不能达到效果,那么你可以换种方式,通过获取前面元素的所占高度之和,用总的屏幕高度来减去该值,然后用得到的值来设置目标p的高度(不知道我的意思你明白不?),即用js来获取p的父元素的高度(屏幕的高度),然后减去前面同级元素高度之和,再设置目标元素的高度值。当然,如果你觉得麻烦,就试试用vh属性来设置吧,即相对于视界高度值(类似于百分比)的单位。这其实和你把所有元素的宽高设置为百分比是差不多的意思(你可以详细去看一下手册上vh,vw属性)。
body加个背景色
不清楚页面结构和有什么别的限制吗。看着改吧
设置了 margin、padding、border、top 、bottom,高度不就自动占满包含块了吗。
补充,看你的需求,加给灰色块吧。或者干脆写个灰的背景色。
是想让灰色的那块区域,占满剩下的所有空间吧。
1:用calc
2:用flex布局
3:用vh
给 margin、padding、border、top 、bottom设置不同的值进行调试。
多一个p包裹,背景色设为红色
body加个背景色。或者你的p设置一个min-height。
我的思路是,直接把下边的内容区域底色设成暖灰,内容区域设置下padding-top;然后“洗车券”width给个90%左右,margin-left和margin-right设置auto,再用margin-bottom(同父元素padding-top)挤开下一个券,最后“洗车券”的::befour和::after分别做锯齿的抬头纹和红色底边,应该就差不多了。
已经解决 body html给百分百 然后容器给一个min-height就好了
只有一张洗车券的话,洗车券那里大小不变,自动下沉到底部吗?