Demo

Question

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

<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

对于父母：

display: flex;

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

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

.parent {
  height: 150px;
  background: red;
  padding: 10px;
  display:flex;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="child"></div>
</div>

Answer 2

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

我建议你看一下Equal Height Columns with Cross-Browser CSS and No Hacks。

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

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

Answer 3

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

html,body {
    height:100%;
}

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

Answer 4

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

Answer 5

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

另外还有faux-columns技术。

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

尝试将下边距设为100％。

margin-bottom: 100%;

Answer 9

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

请看this example。

Answer 10

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

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

Answer 11

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

style = "height:100%;"

关于儿童div

并且对于父母应用此

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

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

Answer 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

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

将display: grid添加到父

Answer 14

我的解决方案：

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

Answer 15

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

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

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

希望这会有所帮助：）

Answer 16

您使用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>

Answer 17

我遇到了同样的问题，它基于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

Answer 18

将position: absolute;给予在我的案例中工作的孩子

Answer 19

这个技巧确实有效：在HTML部分添加最后一个元素风格清晰：两者;
    <div style="clear:both;"></div>
之前的所有内容都将包含在高度中。

Answer 20

这个答案不再理想，因为CSS flexbox和网格实现了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>

Answer 21

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

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

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

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

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

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

Answer 22

.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来使用它。回答这个老问题，因为这对我有用，而且看起来很容易实现。

这与我提供给Question

的答案相同

Answer 23

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

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

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

Answer 24

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

Demo

关于现代的制作方法-柔性盒是最好的。

Answer 25

对我有用的是添加 <?php require_once(__DIR__ . "/../common_functions.php"); $functions = new \common_functions(); /** * capturing the session ID so it can be logged **/ $sessionId = $functions->checkOrStartSession(); 给孩子的所有父母，然后 style={{ display: 'flex', overflowY: "auto" }} 给孩子本身。

Answer 26

最简单的方法就是伪造它。 List Apart多年来已经广泛涵盖了这一点like in this article from Dan Cederholm from 2004。

以下是我通常的做法：

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

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

26 个答案:

Demo