如何在不指定父神高度的情况下,强制子神的高度为父神的100%?
我有一个网站,结构如下。
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航栏在左边,内容栏在右边。内容 div 的信息是通过 PHP 拉入的,所以每次都不同。
我怎样才能垂直缩放导航,使其高度与内容div的高度相同,无论加载哪个页面?
499
20
给父母的。
你应该加上一些前缀,http://css-tricks.com/using-flexbox/。
编辑。 正如@Adam Garner所指出的,align-items: stretch; 是不需要的。 它的用法也是针对父类,而不是子类。 如果你想定义子代拉伸,你就用align-self。
<!--开始片段。 js hide: false console: true babel.false --> -- begin snippet: js hide: false console: true false -->
<!--结束片段-->
注意。本答案适用于不支持Flexbox标准的旧版浏览器。关于现代方法,请参见:https://stackoverflow.com/a/23300532/1155721
我建议你看一下跨浏览器CSS和无黑客的等高列。
基本上,以浏览器兼容的方式用CSS做这件事并不容易(但对表格来说却很容易),所以要给自己找一个合适的预先包装的解决方案。
另外,答案也因你想要100%的高度还是等高而不同。通常情况下,是等高。如果是100%的高度,答案则略有不同。
这是一个令人沮丧的问题,'的处理设计师所有的时间。 诀窍是,你需要在CSS中把BODY和HTML的高度设置为100%。
这段看似毫无意义的代码是为了给浏览器定义100%的含义。 令人沮丧,是的,但却是最简单的方法。
我发现,将这两列设置为
display: table-cell;
而不是float: left;
效果不错。如果你不介意在内容div意外变短的情况下,导航div被剪掉,至少有一个简单的方法。
除此之外,还有一个假列技术。
使用jQuery。
试着让底部的边距为100%。
请看[本例](https://jsfiddle.net/ykzot63e/2/)。
经过长时间的搜索和尝试,没有解决我的问题,除了
儿女情长
而对于父母来说,适用于这个
此外,我使用的是bootstrap,这并没有破坏我的响应。
`height :
`只有当你的所有父节点都有指定的高度百分比时,才会起作用,并且在顶层有一个固定的高度(像素,ems等)。 在顶层。 这样一来,高度就会级联到你的元素上。你可以像@Travis前面说的那样,给html和body元素指定100%的高度,让页面高度层叠到你的节点上。
根据本[文章][1]中介绍的方法,我创造了.少动态解决方案。
Html:
<!--language-all: lang-html -->
少:。
[1]: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
添加`display: 网格 "到父级
我知道这个问题已经问了很久了,但我找到了一个简单的解决方案,认为有人可以使用它(对不起,英语不好)。 下面是这样的。
CSS
超文本标记语言
简单的例子。 注意,你可以变成响应性。
我的解决方案。
由于CSS flexbox和grid已经实现在CSS中,所以这个答案并不理想。 但它仍然是一个可行的解决方案。
在一个较小的屏幕上,你可能希望保持高度自动,因为col1、col2和col3是相互堆叠的。
然而,在媒体查询断点之后,你会希望所有列的cols以相同的高度出现在彼此旁边。
1125 px只是一个窗口宽度断点的例子,在断点之后,您希望所有的列都设置为相同的高度。
当然,如果你需要,你可以设置更多的断点。
这个问题的标题和内容有点矛盾,问题说的是父div,但问题让人觉得你想让两个兄弟div(导航和内容)高度相同。 标题说的是一个父 div,但问题听起来像是你想让两个兄弟 div(导航和内容)的高度相同。
你是(a)希望导航和内容都是main的100%高度,还是(b)希望导航和内容是相同的高度?
我假设是(b)......如果是这样,我不认为你能做到,因为你目前的页面结构(至少,不是用纯CSS和没有脚本)。 你可能需要做这样的事情。
并将content div的左边距设置为导航窗格的宽度。 这样一来,内容'的内容就在导航的右边,你可以将导航div设置为内容'高度的100%。
EDIT: 我完全是在脑子里想的,但你可能还需要把导航div的左边距设置为负值,或者把它的绝对左值设置为0,把它推回到最左边。 问题是,有很多方法可以做到这一点,但并不是所有的方法都能兼容所有的浏览器。
我也有同样的问题,根据Hakam Fostok'的回答,我创建了一个小例子,在某些情况下,它可能不需要添加
display: flex;````和
flex-direction: 列;````在父容器上添加JSFiddle
[参考Dmity'另一个答案中的Less代码]我猜这是某种"伪代码"?
根据我的理解,尝试使用假列技术,应该可以做到这一点。
http://www.alistapart.com/articles/fauxcolumns/
希望这有帮助 :)