我有一个具有以下结构的网站：
<div id="header"></div>
<div id="main">
<div id="navigation"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
导航在左侧，内容div在右侧。内容div的信息是通过PHP获取的，因此每次都不同。
无论加载哪个页面，如何垂直缩放导航使其高度与内容div的高度相同？
如何在不指定父级高度的情况下强制子级div为父级div的高度的100％？
Here old fashion demo based on position: absolute of content container and position: relative of parent container.
As for modern way to do it - flex boxes are the best.
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
From:
http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css
states bootstrap but you do not need bootstrap to use this. Answering this old question, as this worked for me, and seems pretty easy to implement.
This was the same answer I provided to this Question
You use CSS Flexbox
.flex-container {
display: flex;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
}<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="flex-container">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
<p>A Flexible Layout must have a parent element with the <em>display</em> property set to <em>flex</em>.</p>
<p>Direct child elements(s) of the flexible container automatically becomes flexible items.</p>
</body>
</html>giving position: absolute; to the child worked in my case
This trick does work: Adding a final element in your section of HTML with a style of clear:both;
<div style="clear:both;"></div>Everything before that will be included in the height.
After long searching and try, nothing solved my problem except
style = "height:100%;"
on the children div
and for parent apply this
.parent {
display: flex;
flex-direction: column;
}
also, I am using bootstrap and this did not corrupt the responsive for me.
height : <percent> will only work if you have all parent nodes with specified percent height with a fixed height in pixels, ems, etc. on top level. That way, the height will cascade down to your element.
You can specify 100% to html and body elements as @Travis stated earlier to have the page height cascading down to your nodes.
Add display: grid to the parent
#main {
display: table;
}
#navigation, #content {
display: table-cell;
}
Look at this example.
Based on the method described in this article I have created .Less dynamic solution:
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>
Less:
/* 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;
}
}
}
}
Try making the bottom margin 100%.
margin-bottom: 100%;
对于父母：
display: flex;
您应该添加一些前缀，http://css-tricks.com/using-flexbox/。
Edit: As @Adam Garner noted, align-items: stretch; is not needed. Its usage is also for parent, not children. If you want to define children stretching, you use align-self.
.parent {
background: red;
padding: 10px;
display:flex;
}
.other-child {
width: 100px;
background: yellow;
height: 150px;
padding: .5rem;
}
.child {
width: 100px;
background: blue;
}<div class="parent">
<div class="other-child">
Only used for stretching the parent
</div>
<div class="child"></div>
</div>如果您不介意在内容div异常短的情况下裁剪导航div，则至少有一种简单的方法：
#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 */
}
另外，还有伪列技术。
#main {
overflow: hidden;
}
#navigation, #content {
margin-bottom: -1000px;
padding-bottom: 1000px;
}
我发现将两列设置为display: table-cell;而不是float: left;很好。
这是一个始终困扰着设计师的令人沮丧的问题。诀窍是您需要在CSS中的BODY和HTML上将高度设置为100％。
html,body {
height:100%;
}
这个看似毫无意义的代码是向浏览器定义100％的含义。令人沮丧，是的，但这是最简单的方法。
注意：此答案适用于不支持Flexbox标准的旧版浏览器。有关现代方法，请参阅：https : //stackoverflow.com/a/23300532/1155721
我建议您看看使用Cross-Browser CSS和No Hacks的等高列。
基本上，以与浏览器兼容的方式使用CSS做到这一点并不是一件容易的事（但对于表却不那么重要），因此请为自己找到合适的预打包解决方案。
另外，答案取决于您是否要100％高度或相等高度。通常，它等于高度。如果高度为100％，答案会略有不同。
As shown earlier, flexbox is the easiest. eg.
this will align all child elements to the center within the parent element.