如何强制子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的高度相同，无论哪个页面被加载?

当前回答

这段代码非常适合我

<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，但问题让它听起来像你想要两个兄弟div(导航和内容)是相同的高度。

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

我假设(b)……如果是这样的话，我不认为你将能够做到这一点，因为你目前的页面结构(至少，不是纯CSS和没有脚本)。你可能需要这样做:

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

并将内容div设置为左侧空白，无论导航窗格的宽度是多少。这样，内容的内容就在导航栏的右边，你可以将导航栏的高度设置为内容高度的100%。

编辑:我完全是在我的头脑中做的，但你可能还需要将导航div的左侧空白设置为负值，或将它的绝对左侧设置为0，以将它推回到最左边。问题是，有很多方法可以实现这一点，但并不是所有的方法都能与所有浏览器兼容。

2009-07-13 22:26:18

我有同样的问题，它的工作基于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

如果你不介意导航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 */
}

除此之外，还有假柱技术。

2009-07-13 22:22:10

我可能有点晚了，但我找到了一个周围的工作，可能是一个hack。首先给父层一个弯曲和100vh的高度

就像这样:

.parent {
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;/* Can be less depends on the container, basically this forces the element to expand */
}

2021-11-20 03:45:12

将display: grid添加到父节点

2018-03-06 17:30:27

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

推荐文章

最新文章

标签