如何强制子div是100%的父div的高度而不指定父的高度?

我有一个网站与以下结构:

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

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

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

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

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

当前回答

2021年的读者:

试试这个:

.parent {
  position: relative;

  display: flex;                 // And you will probably need this too.
  flex-direction: row;           // or column.
}

.child {
  position: absolute;
  top: 0;
  bottom: 0;

  align-self: center;            // And you will probably need this too.
}

以下是我正在做的事情:

2021-08-25 05:08:05

其他回答

我的解决方案:

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

2017-01-19 20:06:36

对于父节点:

display: flex;

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

正如@Adam Garner所指出的，align-items:拉伸;不需要。它的用法也适用于父母，而不是孩子。如果你想定义儿童拉伸，你使用align-self。

.parent { 背景:红色; 填充:10 px; 显示:flex; ｝ .other-child { 宽度:100 px; 背景:黄色; 身高:150 px; 填充:.5rem; ｝ .child { 宽度:100 px; 背景:蓝色; ｝ < div class = "父" > < div class = "另一个孩子“> 仅用于拉伸父节点 < / div > < div class = "孩子" > < / div > < / div >

2014-04-25 18:33:53

我有同样的问题，它的工作基于Hakam Fostok的答案，我已经创建了一个小例子，在某些情况下，它可能不需要添加显示:flex;而弯曲方向:圆柱;在父容器上

.row {
    margin-top: 20px;
}

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

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

JSFiddle

2019-08-14 14:37:13

这段代码非常适合我

<html>
    <body style="display: flex;">
        <div style="position: absolute; width: 100%; height: 100%; background-color: aliceblue">
            <table style="width: 100%; height: 100%;">
               <tr>
                   <td style="width: 70%; background-color: green"></td>
                   <td style="background-color: red"></td>
               </tr>
            </table>
       </div>
   </body>

2022-09-02 19:11:32

下面的代码提供了设置滚动div的最小高度的能力，并通过使用flex使其具有其父div的100%高度。

CSS:

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

.scroll {
  overflow: auto;
  flex: 1 0 50px;
}

HTML:

<div class="main">
  <div class="scroll">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
  </div>
</div>

2022-08-02 05:46:49

如何强制子div是100%的父div的高度而不指定父的高度?

推荐文章

最新文章

标签