子高度 div 扩展到父 div 的底部

发布于 2024-12-12 12:41:44 字数 693 浏览 2 评论 0原文

我有以下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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

把人绕傻吧 2024-12-19 12:41:44
.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

请参阅工作示例: http://jsfiddle.net/Wexcode/ENaqK/

.div1 { height: 400px; }
.div1a { 
    float: left;
    width: 100%;
    height: 100px;
    clear: both; }
.div1b { 
    float: left;
    width: 100%;
    height: 100px;    
    clear: both; }
.div1c { height: 100%; }

See working example: http://jsfiddle.net/Wexcode/ENaqK/

初懵 2024-12-19 12:41:44

您可以使用 Flex 布局,然后使用 flex-grow 来指示最后一个元素应该增长,而不是使用默认的块布局:

.div1 {
  display: flex;
  flex-direction: column;
}
.div1c {
  flex-grow: 1;
}

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:

.div1 {
  display: flex;
  flex-direction: column;
}
.div1c {
  flex-grow: 1;
}
一袭白衣梦中忆 2024-12-19 12:41:44

这里有一些 CSS 可以做到这一点。

.div1overflow:hidden 设置为抓取最高 div 的高度。听起来可能是 .div1a.div1b.div1cposition:absolute,这样它就可以使用 .div1 是一个参考线,它将自己定位在 bottom 之外code> 并放置在 topright 的位置。

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

和一把小提琴:http://jsfiddle.net/neilheinrich/7ZGaG/

Here's some CSS that will do it.

.div1 is overflow: hidden set to grab the height of the tallest div. Which it sounds like it could be .div1a or .div1b. .div1c is position: absolute so that it can use .div1 is a guide, it positions itself off of the bottom and is put into position with top and right.

.div1 {
    width: 450px;
    position: relative;
    background: wheat;
    overflow: hidden;
}
.div1a {
    float: left;
    width: 150px;
    background: blue;
}
.div1b {
    float: left;
    width: 150px;
    height: 120px;
    background: red;
}
.div1c {
    width: 150px;    
    position: absolute;
    top: 0;
    right: 0;
    bottom: 150px;
    background: pink;
}

and a fiddle: http://jsfiddle.net/neilheinrich/7ZGaG/

枕梦 2024-12-19 12:41:44

这是我想到的(我的jsfiddle):

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

但是,我会做一些不同的事情,如果我能够访问 JavaScript。

Here's what I've come up with (my jsfiddle):

.div1 {
    position: relative;
    height: 400px;
    border: 1px solid black;
    overflow: hidden;
}

.div1a {
    height: 100px;
    background-color: yellow;
}

.div1b {
    height: 100px;
    background-color: blue;
}

.div1c {
    position: relative;
    top: 200;
    height: 100%;
    background-color: red;
}

I would do it a bit differently, however, if I had access to JavaScript.

北斗星光 2024-12-19 12:41:44

简单的解决方案是使用 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 with overflow:hidden and the child div with height:100%

Add the following attributes:


For div1

position:fixed


For div1c

overflow:hidden;
position:relative;
height:100%;


Sample code - http://jsfiddle.net/7ZGaG/26/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文