如何在不指定父母身高的情况下将孩子分数强制为家长分数的100％？

我有一个网站的结构如下：

<div id="header"></div> <div id="main"> <div id="navigation"></div> <div id="content"></div> </div> <div id="footer"></div> 

导航位于左侧，内容div位于右侧。 内容div的信息通过PHP引入，所以每次都是不同的。

如何垂直缩放导航，使其高度与内容div的高度相同，无论加载哪个页面？

Answer 1

注意 ：此答案适用于不支持Flexbox标准的旧版浏览器。 有关现代方法，请参阅： https : //stackoverflow.com/a/23300532/1155721

---

我build议你看看跨浏览器CSS和没有黑客平等高度列 。

基本上，用CSS以浏览器兼容的方式来做这件事并不是微不足道的（但是对于表格来说是微不足道的），所以find一个合适的预先打包的解决scheme。

此外，答案因您是要100％身高还是身高相等而异。 通常它是相等的高度。 如果它的高度为100％，答案略有不同。

Answer 2

对于父母：

 display: flex; 

你应该添加一些前缀， http://css-tricks.com/using-flexbox/ 。

编辑：如@亚当·加纳指出，alignment项目：拉伸; 是不需要的。 它的使用也是为父母，而不是孩子。 如果你想定义拉伸的孩子，你使用align-self。

Answer 3

这是一个令人沮丧的问题，一直与devise师交涉。 诀窍是你需要在CSS中设置BODY和HTML的高度为100％。

 html,body { height:100%; } 

这个看似毫无意义的代码是为了向浏览器定义100％的含义。 令人沮丧，是的，但是最简单的方法。

Answer 4

我发现设置两列display: table-cell; 而不是float: left; 效果很好。

Answer 5

如果您不介意导航div在意外短的内容div的情况下被剪辑，至less有一个简单的方法：

 #main { position: relative; } #main #navigation { position: absolute; top: 0; left: 0; bottom: 0; width: 10em; /* or whatever */ } #main #content { margin: 0; margin-left: 10em; /* or whatever width you set for #navigation */ } 

此外，还有人造柱技术。

Answer 6

 #main { overflow: hidden; } #navigation, #content { margin-bottom: -1000px; padding-bottom: 1000px; } 

Answer 7

使用jQuery：

 $(function() { function unifyHeights() { var maxHeight = 0; $('#container').children('#navigation, #content').each(function() { var height = $(this).outerHeight(); // alert(height); if ( height > maxHeight ) { maxHeight = height; } }); $('#navigation, #content').css('height', maxHeight); } unifyHeights(); }); 

Answer 8

height : <percent>只有在顶层具有指定百分比高度的像素，ems等高度固定的所有父节点时才有效。 这样，高度将逐渐降低到您的元素。

您可以指定100％的html和正文元素作为@Travis之前陈述的页面高度级联到您的节点。

Answer 9

尝试使底部边距达到100％。

 margin-bottom: 100%; 

Answer 10

 #main { display: table; } #navigation, #content { display: table-cell; } 

看看这个例子 。

Answer 11

基于这篇文章中描述的方法，我创build了很less的dynamic解决scheme：

HTML：

 <div id="container3"> <div id="container2"> <div id="container1"> <div id="col1">Column 1</div> <div id="col2">Column 2</div> <div id="col3">Column 3</div> </div> </div> </div> 

减：

 /* Changes these variables to adjust your columns */ @col1Width: 60%; @col2Width: 1%; @padding: 0%; /* Misc variable. Do not change */ @col3Width: 100% - @col1Width - @col2Width; #container3 { float: left; width: 100%; overflow: hidden; background-color: red; position: relative; #container2 { float: left; width: 100%; position: relative; background-color: yellow; right: @col3Width; #container1 { float: left; width: 100%; position: relative; right: @col2Width; background-color: green; #col1 { float: left; width: @col1Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding; overflow: hidden; } .col2 { float: left; width: @col2Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 2; overflow: hidden; } #col3 { float: left; width: @col3Width - @padding * 2; position: relative; left: 100% - @col1Width + @padding + @padding * 4; overflow: hidden; } } } } 

Answer 12

经过漫长的search和尝试，没有任何解决我的问题，除了

 style = "height:100%;" 

对孩子div

并为父母申请这个

 .parent { display: flex; flex-direction: column; } 

我也使用引导，这并没有腐败的响应我。

Answer 13

我知道自从问题出现以来，这是一个平常的时间，但我find了一个简单的解决scheme，并认为有人可以使用它（对于可怜的英语抱歉）。 这里是：

CSS

 .main, .sidebar { float: none; padding: 20px; vertical-align: top; } .container { display: table; } .main { width: 400px; background-color: LightSlateGrey; display: table-cell; } .sidebar { width: 200px; display: table-cell; background-color: Tomato; } 

HTML

 <div class="container clearfix"> <div class="sidebar"> simple text here </div> <div class="main"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam congue, tortor in mattis mattis, arcu erat pharetra orci, at vestibulum lorem ante a felis. Integer sit amet est ac elit vulputate lobortis. Vestibulum in ipsum nulla. Aenean erat elit, lacinia sit amet adipiscing quis, aliquet at erat. Vivamus massa sem, cursus vel semper non, dictum vitae mi. Donec sed bibendum ante. </div> </div> 

简单的例子。 请注意，您可以变成响应能力。

Answer 14

在RWD项目中最好使用jQuery。 对于小屏幕，您可能想要保持高度自动，因为col1，col2和col3会叠放在一起。

然而，在媒体查询brak点之后，您希望cols以相同的高度排列在所有列的旁边。

1125 px只是窗口宽度中断点的一个例子，在此之后，您可能希望将所有列设置为相同的高度。

 <div class="wraper"> <div class="col1">Lorem ipsum dolor sit amet.</div> <div class="col2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos laudantium, possimus sed, debitis amet in, explicabo dolor similique eligendi officia numquam eaque quae illo magnam distinctio odio, esse vero aspernatur.</div> <div class="col3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.</div> </div> 

如果你需要，你可以设置更多的断点。

 <script> $(document).ready(function(){ $(window).on('load resize', function() { if (window.innerWidth>= 1125) { $('.col1').height($('.wraper').height()); $('.col2').height($('.wraper').height()); $('.col3').height($('.wraper').height()); } if (window.innerWidth < 1125) { $('.col1').height('auto'); $('.col2').height('auto'); $('.col3').height('auto'); } }); }); </script> 

Answer 15

问题的标题和内容有点矛盾。 标题提到了一个父母的div，但这个问题听起来像是你想要两个兄弟div（导航和内容）是一样的高度。

你是否希望导航和内容都是主要高度的100％，或者（b）想要导航和内容是相同的高度？

我会假设（b）…如果是这样的话，我认为你不能根据你当前的页面结构来做到这一点（至less，不是纯粹的CSS和没有脚本）。 您可能需要执行以下操作：

 <main div> <content div> <navigation div></div> </div> </div> 

并将内容div设置为无论导航窗格的宽度为左边距。 这样，内容的内容就在导航的右侧，您可以将导航div设置为内容高度的100％。

编辑：我这样做完全在我的脑海中，但您可能还需要将导航div的左边距设置为负值或将其绝对左侧设置为0将其推回到最左侧。 问题是，有很多方法可以解决这个问题，但是并不是所有的浏览器都兼容。

Answer 16

[在另一个答案中提到Dmity的Less代码]我猜这是某种“伪代码”？

从我的理解尝试使用虚拟列技术，应该做的伎俩。

http://www.alistapart.com/articles/fauxcolumns/

希望这可以帮助 ：）

Answer 17

如前所述，flexbox是最简单的。 例如。

 #main{ display: flex; align-items:center;} 

这将把所有的子元素都alignment到父元素的中心。

Answer 18

我的解决scheme

 $(window).resize(function() { $('#div_to_occupy_the_rest').height( $(window).height() - $('#div_to_occupy_the_rest').offset().top ); }); 

Answer 19

 .row-eq-height { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } 

从：

examples/equal-height-columns/equal-height-columns.css

状态bootstrap，但你不需要引导来使用这个。 回答这个老问题，这个工作对我来说，似乎很容易实现。

这是我提供给这个问题的同样的答案

Answer 20

最简单的方法就是伪造它。 List Apart多年来已经广泛地报道了这一点， 就像2004年在Dan Cederholm的这篇文章中一样 。

以下是我通常这样做的：

 <div id="container" class="clearfix" style="margin:0 auto;width:950px;background:white url(SOME_REPEATING_PATTERN.png) scroll repeat-y center top;"> <div id="navigation" style="float:left;width:190px;padding-right:10px;"> <!-- Navigation --> </div> <div id="content" style="float:left;width:750px;"> <!-- Content --> </div> </div> 

通过将#container包装到另一个div中，将header divembedded到＃容器的同级，并将边距和宽度样式移动到父级容器，您可以轻松地将标题添加到此devise中。 而且，CSS应该被移动到一个单独的文件中，而不是保持内联等。最后，clearfix类可以在位置上find。