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

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

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

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

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

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

html,body {
    height:100%;
}

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

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

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

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

尝试将底部边距设为100%.

margin-bottom: 100%;

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

看看这个例子.

height : 仅当您拥有指定百分比高度且在顶层具有固定高度(以像素,ems等为单位)的所有父节点时才会起作用.这样,高度将级联到您的元素.

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

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

style = "height:100%;"

关于儿童div

并为父母申请

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

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

基于本文中描述的方法,我创建了.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;
            }
        }
    }
}