Html 继承父级的高度不起作用

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/10490933/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 00:15:04  来源:igfitidea点击:

Inherit height of parent doesn't work

htmlcssjsfiddle

提问by rjmcb

I wanted the .colsinside .rowto inherit .row's height and make the .colsbe fixed inside the .row. Here's the fiddle.. http://jsfiddle.net/Hhf8R/

我想在.cols里面.row继承.row的高度,使.cols固定内.row。这是小提琴.. http://jsfiddle.net/Hhf8R/

My idea is to make it like a table but using divs. like this : http://jsfiddle.net/hhUtb/

我的想法是让它像一张桌子,但使用 div。像这样:http: //jsfiddle.net/hhUtb/

回答by Thomas Jones

in order for divs to be 100% of the height of their parent, the parent has to have a defined height.

为了使 div 达到其父级高度的 100%,父级必须具有定义的高度。

the browser can't calculate 100%(or inherit) of something that hasn't been fully rendered yet.

浏览器无法计算 100%(或继承)尚未完全呈现的内容。

回答by Jesse

You need to set the heightCSS property on the parent if you want the child to inherit it.

height如果您希望子级继承它,则需要在父级上设置CSS 属性。

If you're wanting your height to be dynamic based on the content, that is something that isn't trivially achieved with CSS unfortunately. There are a couple different methods; this oneseems like a good place to start.

如果您希望您的高度基于内容是动态的,那么不幸的是,使用 CSS 无法轻松实现这一点。有几种不同的方法;似乎是一个很好的起点。

回答by Ben

You need an explicit height on the parent rowin order for inheritto have a meaning.

你需要一个明确的父row级高度才能inherit有意义。

Add a height declaration to your row:

向您的行添加高度声明:

http://jsfiddle.net/LzkgU/

http://jsfiddle.net/LzkgU/

and the floated columns do inherit the parent's height.

并且浮动列确实继承了父级的高度。

(Sidenote: There will be people who tell you that floats can't inherit heights:

(旁注:会有人告诉你浮动不能继承高度:

CSS - make div's inherit a height

CSS - 使 div 继承高度

but that ain't necessarily so.)

但不一定如此。)

回答by user3139655

You can fix the height of your content in js by checking changement that could transform your content.

您可以通过检查可以转换您的内容的更改来修复 js 中内容的高度。

For example, I have an Html Editor that animate a cursor by using setTimeout. While cursor animates, I change the height of my cell if needed.

例如,我有一个使用 setTimeout 为光标设置动画的 Html 编辑器。当光标动画时,我会根据需要更改单元格的高度。