关于一个css的布局问题

问个问题 css怎么样让箭头指向的区域自动占据body下面余下的部分A？

多张券的时候是这样

问题是券少的时候！A处是白色的我想让A和B一样的颜色

我看了flex的 stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
但是用不起来！！

php html css javascript

阅读 3.8k

10 个回答

得票最新

undefind_5

1.5k1297133

发布于
2017-01-04

✓ 已被采纳

不太容易（至少不是你想的那样，给某个元素加个heigth:100%，它就能自撑满剩下的高度），如果是

<body>
    <header></header>
    <section></section>
    <footer></footer>
</body>

这样的层级浅的，倒是可以通过min-height:100%;来实现你想要的效果，很显然，楼主所说的箭头所指的那个div至少是在section下的子元素，也就是说至少是body的孙子，所以说，单纯的用css设置该div样式是无法实现的，你至少得通过设置section的高度为min-height:100%;同时扣除该div的同级元素的高度，比如他前面的同级元素占了大概50%，那么你也只能设置height：50%，而很显然，他前面的那些元素，比如图片轮播框，选项框等元素的高低肯定不是用百分比实现的，所以这样设置并不能达到效果，那么你可以换种方式，通过获取前面元素的所占高度之和，用总的屏幕高度来减去该值，然后用得到的值来设置目标div的高度（不知道我的意思你明白不？）,即用js来获取div的父元素的高度（屏幕的高度），然后减去前面同级元素高度之和，再设置目标元素的高度值。当然，如果你觉得麻烦，就试试用vh属性来设置吧，即相对于视界高度值（类似于百分比）的单位。这其实和你把所有元素的宽高设置为百分比是差不多的意思（你可以详细去看一下手册上vh，vw属性）。

guangpunba

5.4k42754

发布于
2017-01-04

body加个背景色

toBeTheLight

16.6k41634

发布于
2017-01-04

更新于
2017-01-04

width: 100%;
position: absolute;
top: 距离最上边的距离px;
bottom: 距离最下边的距离px;
left: 0px;

不清楚页面结构和有什么别的限制吗。看着改吧

absolute性质的盒子，它的包含块的高度等于它的盒模型（margin、padding、border、height）的高度 + top + bottom值。宽同理。

设置了 margin、padding、border、top 、bottom，高度不就自动占满包含块了吗。
补充，看你的需求，加给灰色块吧。或者干脆写个灰的背景色。

viewweiwu

66010

发布于
2017-01-04

是想让灰色的那块区域，占满剩下的所有空间吧。
1：用calc
2：用flex布局
3：用vh

行走的程序猿

117129

发布于
2017-01-04

给 margin、padding、border、top 、bottom设置不同的值进行调试。

迹_Jason

1k11017

发布于
2017-01-04

多一个div包裹，背景色设为红色

linong

29.2k1266132

发布于
2017-01-04

body加个背景色。或者你的div设置一个min-height。

某熊猫桑

16.1k61547

发布于
2017-01-04

我的思路是，直接把下边的内容区域底色设成暖灰，内容区域设置下padding-top；然后“洗车券”width给个90%左右，margin-left和margin-right设置auto，再用margin-bottom(同父元素padding-top)挤开下一个券，最后“洗车券”的::befour和::after分别做锯齿的抬头纹和红色底边，应该就差不多了。

nans23

628787152

发布于
2017-01-04

已经解决 body html给百分百然后容器给一个min-height就好了