如何强制子div为父div的高度的100％而不指定父级的高度？

我有一个具有以下结构的网站：

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

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

---

#1楼

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

---

我建议你看一下使用跨浏览器CSS和无黑客的Equal Height Columns 。

基本上，使用CSS以浏览器兼容的方式执行此操作并非易事（但对于表格而言是微不足道的），因此请找到适合您的预打包解决方案。

此外，答案取决于您是想要100％高度还是相同高度。 通常它的高度相等。 如果它是100％高度，答案会略有不同。

---

#2楼

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

从我的理解尝试使用应该做的技巧的人造柱技术。

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

希望这可以帮助 ：）

---

#3楼

如果您不介意在意外短的内容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 */
}

另外还有人造柱技术。

---

#4楼

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

html,body {
    height:100%;
}

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

---

#5楼

问题的标题和内容有点矛盾。 标题说的是父div，但这个问题听起来好像你想要两个兄弟div（导航和内容）的高度相同。

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

我假设（b）......如果是这样的话，我不认为你能够在你当前的页面结构（至少不是纯CSS和没有脚本）的情况下做到这一点。 您可能需要执行以下操作：

并将内容div设置为具有导航窗格宽度的左边距。 这样，内容的内容位于导航的右侧，您可以将导航div设置为内容高度的100％。

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

---

#6楼

最简单的方法是伪造它。 List Apart已经广泛涵盖了这一点， 就像2004年Dan Cederholm的这篇文章一样 。

这是我通常这样做的方式：

通过将#container包装在另一个div中，将头部div嵌入为＃container的兄弟，并将边距和宽度样式移动到父容器，可以轻松地在此设计中添加标题。 此外，CSS应该移动到一个单独的文件中，而不是保持内联等。最后，clearfix类可以在positioniseverything上找到。

---

#7楼

基于本文中描述的方法，我创建了.Less动态解决方案：

HTML：

    

        

            
Column 1
            
Column 2
            
Column 3
        
    

减：

/* 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;
            }
        }
    }
}

---

#8楼

height : 仅在您拥有指定百分比高度的所有父节点且顶层具有固定高度（以像素，ems等为单位）时才有效。 这样，高度将级联到您的元素。

您可以指定100％的html和body元素，如前面所述的@Travis，以使页面高度级联到您的节点。

---

#9楼

尝试将底部边距设为100％。

margin-bottom: 100%;

---

#10楼

对于父母：

display: flex;

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

编辑：正如@Adam Garner所说，align-items：stretch; 不需要。 它的用途也适用于父母，而不是孩子。 如果要定义子项拉伸，请使用align-self。

 .parent { background: red; padding: 10px; display:flex; } .other-child { width: 100px; background: yellow; height: 150px; padding: .5rem; } .child { width: 100px; background: blue; } 

 
 
 Only used for stretching the parent 
 
  

---

#11楼

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

---

#12楼

我知道问题已经过了很长时间，但是我发现了一个简单的解决方案，并且认为有人可以使用它（抱歉英语很差）。 在这里：

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

    

        simple text here
    
    

        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.
    

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

---

#13楼

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

看看这个例子 。

---

#14楼

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

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

这会将所有子元素与父元素中的中心对齐。

---

#15楼

这个答案不再理想，因为CSS flexbox和grid实现了CSS。 但它仍然是一个有效的解决方案

在较小的屏幕上，您可能希望保持高度自动，因为col1，col2和col3彼此堆叠在一起。

但是，在媒体查询断点之后，您希望cols彼此相邻，并且所有列的高度相等。

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

    
Lorem ipsum dolor sit amet.
    
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.
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem, odio qui praesentium.

当然，如果需要，您可以设置更多断点。

---

#16楼

经过长时间的搜索和尝试，没有解决我的问题，除了

style = "height:100%;"

关于儿童div

并为父母申请

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

另外，我正在使用bootstrap，这并没有破坏对我的响应。

---

#17楼

我的解决方案

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

---

#18楼

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

从：

http://getbootstrap.com.vn/examples/equal-height-columns/equal-height-columns.css

说明bootstrap，但你不需要bootstrap来使用它。 回答这个老问题，因为这对我有用，而且看起来很容易实现。

这与我在本课题中提供的答案相同

---

#19楼

这个技巧确实有效：在你的HTML部分添加一个clear元素的最后一个元素：both;

之前的所有内容都将包含在高度中。

---

#20楼

将display: grid添加到父级

---

#21楼

给position: absolute; 对我的孩子工作

---

#22楼

您使用CSS Flexbox

 .flex-container { display: flex; background-color: DodgerBlue; } .flex-container > div { background-color: #f1f1f1; margin: 10px; padding: 20px; font-size: 30px; } 

      
 
1
 
2
 
3
 
 
A Flexible Layout must have a parent element with the display property set to flex.
 
Direct child elements(s) of the flexible container automatically becomes flexible items.
   

---

#23楼

这里基于position: absolute旧时尚演示position: absolute内容容器的position: absolute position: relative和父容器的position: relative 。

演示

至于现代化的方式 - 柔性盒是最好的。

---

#24楼

我有同样的问题，它根据Hakam Fostok的答案工作，我创建了一个小例子，在某些情况下它可能无需添加display: flex; 和flex-direction: column; 在父容器上

.row {
    margin-top: 20px;
}

.col {
    box-sizing: border-box;
    border: solid 1px #6c757d;
    padding: 10px;
}

.card {
    background-color: #a0a0a0;
    height: 100%;
}

的jsfiddle

---

#25楼

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

---

#26楼

使用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();
});