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
Inherit height of parent doesn't work
提问by rjmcb
I wanted the .cols
inside .row
to inherit .row
's height and make the .cols
be 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 height
CSS 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 row
in order for inherit
to have a meaning.
你需要一个明确的父row
级高度才能inherit
有意义。
Add a height declaration to your row:
向您的行添加高度声明:
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
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 编辑器。当光标动画时,我会根据需要更改单元格的高度。