如何在不指定父神高度的情况下，强制子神的高度为父神的100%？

我有一个网站，结构如下。

<div id="header"></div>

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

<div id="footer"></div>

导航栏在左边，内容栏在右边。内容 div 的信息是通过 PHP 拉入的，所以每次都不同。

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

TylerH
已编辑的问题 3日 一月 2019 в 8:20
编程
html css
13日 七月 2009 в 10:14
24 种观点
对该问题的评论 (2)

给父母的。

display: flex;

你应该加上一些前缀，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 -->

.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>

<！--结束片段-->

Aiphee
编辑本段答案19日 六月 2019 в 8:03
评论(8)
解决办法

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

我建议你看一下跨浏览器CSS和无黑客的等高列。

基本上，以浏览器兼容的方式用CSS做这件事并不容易（但对表格来说却很容易），所以要给自己找一个合适的预先包装的解决方案。

另外，答案也因你想要100%的高度还是等高而不同。通常情况下，是等高。如果是100%的高度，答案则略有不同。

csvan
编辑本段答案17日 七月 2017 в 11:06
评论(2)

这是一个令人沮丧的问题，'的处理设计师所有的时间。 诀窍是，你需要在CSS中把BODY和HTML的高度设置为100%。

html,body {
    height:100%;
}

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

评论(3)

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

John
编辑本段答案9日 十一月 2015 в 9:36
评论(6)

如果你不介意在内容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)
#main {
    overflow: hidden;
}
#navigation, #content {
    margin-bottom: -1000px;
    padding-bottom: 1000px;
}
评论(3)

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

试着让底部的边距为100%。

margin-bottom: 100%;
评论(2)
 
#main {
   display: table;
} 
#navigation, #content {
   display: table-cell;
}

请看[本例](https://jsfiddle.net/ykzot63e/2/)。

评论(1)

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

style = "height:100%;"

儿女情长

而对于父母来说，适用于这个

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

此外，我使用的是bootstrap，这并没有破坏我的响应。

Hakan Fıstık
编辑本段答案3日 三月 2018 в 1:45
评论(1)

`height :

`只有当你的所有父节点都有指定的高度百分比时，才会起作用，并且在顶层有一个固定的高度（像素，ems等）。 在顶层。 这样一来，高度就会级联到你的元素上。

你可以像@Travis前面说的那样，给html和body元素指定100%的高度，让页面高度层叠到你的节点上。

评论(0)

根据本[文章][1]中介绍的方法，我创造了.少动态解决方案。

Html:

<！--language-all: lang-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;
            }
        }
    }
}

[1]: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

评论(0)

添加`display: 网格 "到父级

评论(1)

我知道这个问题已经问了很久了，但我找到了一个简单的解决方案，认为有人可以使用它（对不起，英语不好）。 下面是这样的。

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

超文本标记语言

<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>

简单的例子。 注意，你可以变成响应性。

评论(1)

我的解决方案。

$(window).resize(function() {
   $('#div_to_occupy_the_rest').height(
        $(window).height() - $('#div_to_occupy_the_rest').offset().top
    );
});
Sunil Garg
编辑本段答案20日 四月 2018 в 9:31
评论(0)

由于CSS flexbox和grid已经实现在CSS中，所以这个答案并不理想。 但它仍然是一个可行的解决方案。

在一个较小的屏幕上，你可能希望保持高度自动，因为col1、col2和col3是相互堆叠的。

然而，在媒体查询断点之后，你会希望所有列的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() {
            let vraperH = $('.wraper').height();
            if (window.innerWidth>= 1125) {
              $('.col1').height(vraperH);
              $('.col2').height(vraperH);
              $('.col3').height(vraperH);
            }
            if (window.innerWidth < 1125) {
              $('.col1').height('auto');
              $('.col2').height('auto');
              $('.col3').height('auto');
            }
        });
    });
</script>
DevWL
编辑本段答案4日 五月 2019 в 10:25
评论(0)

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

你是(a)希望导航和内容都是main的100%高度，还是(b)希望导航和内容是相同的高度？

我假设是(b)......如果是这样，我不认为你能做到，因为你目前的页面结构（至少，不是用纯CSS和没有脚本）。 你可能需要做这样的事情。



         </div>
    </div>
</div>

并将content div的左边距设置为导航窗格的宽度。 这样一来，内容'的内容就在导航的右边，你可以将导航div设置为内容'高度的100%。

EDIT: 我完全是在脑子里想的，但你可能还需要把导航div的左边距设置为负值，或者把它的绝对左值设置为0，把它推回到最左边。 问题是，有很多方法可以做到这一点，但并不是所有的方法都能兼容所有的浏览器。

评论(0)

我也有同样的问题，根据Hakam Fostok'的回答，我创建了一个小例子，在某些情况下，它可能不需要添加display: flex;````和flex-direction: 列;````在父容器上添加 

.row {
    margin-top: 20px;
}

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

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

JSFiddle

评论(0)

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

具有明确:既的风格。 的风格。 的样式。

> > >
> ＆gt。 之前的一切都将包含在高度中。
评论(1)

[参考Dmity'另一个答案中的Less代码]我猜这是某种"伪代码"？

根据我的理解，尝试使用假列技术，应该可以做到这一点。

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

希望这有帮助 :)

评论(2)