子高度 div 扩展到父 div 的底部
我有以下html:
<div class="div1">
<div class="div1a"></div>
<div class="div1b"></div>
<div class="div1c"></div>
</div>
这里是布局的链接: http://jsfiddle.net/7ZGaG/5/
我只需要给 div1 提供高度。
- div1a 和 div1b 具有固定高度。 (实际上div1也有固定的高度)
- div1c需要扩展到div1的底部。
例如:
div1: 400px
div1a: 100px
div1b:100px
div1c: 50px
所以底部有150px的空位。 (400 - 100 - 100 - 50 = 150)。我怎样才能用CSS解决这个问题,div1c的高度到div1的底部?
如果我对 div1c 执行 height:100%
,那么它需要 div1 的高度,即 400px。
谢谢!
I have the following html:
<div class="div1">
<div class="div1a"></div>
<div class="div1b"></div>
<div class="div1c"></div>
</div>
Here a link of layout: http://jsfiddle.net/7ZGaG/5/
I need to give height only to div1.
- div1a and div1b have fixed height. (In fact div1 has also a fixed height)
- div1c needs to expand to the bottom of div1.
For example:
div1: 400px
div1a: 100px
div1b: 100px
div1c: 50px
So there is 150px empty place at the bottom. (400 - 100 - 100 - 50 = 150). How can I solve this with css that div1c has the height to the bottom of div1?
If I do height:100%
for div1c, then it takes height of div1, and that is 400px.
Thanks!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
请参阅工作示例: http://jsfiddle.net/Wexcode/ENaqK/
See working example: http://jsfiddle.net/Wexcode/ENaqK/
您可以使用 Flex 布局,然后使用
flex-grow
来指示最后一个元素应该增长,而不是使用默认的块布局:Instead of using the default block layouting, you could use a Flex layout and then use
flex-grow
to indicate that the last element should grow:这里有一些 CSS 可以做到这一点。
.div1
是overflow:hidden
设置为抓取最高 div 的高度。听起来可能是.div1a
或.div1b
。.div1c
是position:absolute
,这样它就可以使用.div1
是一个参考线,它将自己定位在bottom
之外code> 并放置在top
和right
的位置。和一把小提琴:http://jsfiddle.net/neilheinrich/7ZGaG/
Here's some CSS that will do it.
.div1
isoverflow: hidden
set to grab the height of the tallest div. Which it sounds like it could be.div1a
or.div1b
..div1c
isposition: absolute
so that it can use.div1
is a guide, it positions itself off of thebottom
and is put into position withtop
andright
.and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/
这是我想到的(我的jsfiddle):
但是,我会做一些不同的事情,如果我能够访问 JavaScript。
Here's what I've come up with (my jsfiddle):
I would do it a bit differently, however, if I had access to JavaScript.
简单的解决方案是使用
overflow:hidden
设置父div
的样式,使用height:100%
设置子div
的样式添加以下属性:
对于
div1
position:fixed
对于
div1c
overflow:hidden;
位置:相对;
height:100%;
示例代码 - http://jsfiddle.net/7ZGaG/26 /
Easy solution would be to style the parent
div
withoverflow:hidden
and the childdiv
withheight:100%
Add the following attributes:
For
div1
position:fixed
For
div1c
overflow:hidden;
position:relative;
height:100%;
Sample code - http://jsfiddle.net/7ZGaG/26/