如何强制子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事件中被剪辑，至少有一个简单的方法:

#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

我的解决方案:

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

2017-01-19 20:06:36

经过长时间的寻找和尝试，没有什么能解决我的问题

style = "height:100%;"

关于儿童div

对于父母应用这个

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

此外，我使用bootstrap，这并没有腐败的响应为我。

2016-11-24 11:16:49

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

看看这个例子。

2015-05-28 21:12:44

对我有效的是添加 style={{display: 'flex'， overflowY: "auto"}} 给所有孩子的父母，然后 style={{overflowY: "auto"}} 对孩子本身。

2021-06-23 21:13:58

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

推荐文章

最新文章

标签