如何强制子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

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

2018-07-07 23:23:09

我发现，设置两列显示:table-cell;代替float: left;工作得很好。

2011-05-05 21:59:25

我的解决方案:

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

2017-01-19 20:06:36

我知道这个问题已经有很长一段时间了，但我找到了一个简单的解决方法，并且认为有人可以使用它(对不起，英语不好)。是这样的:

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>

简单的例子。注意，您可以将其转换为响应性。

2014-10-29 11:57:25

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

推荐文章

最新文章

标签