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

当前回答

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

其他回答

这个答案是不理想的，因为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>

2016-03-12 15:56:03

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

看看这个例子。

2015-05-28 21:12:44

你可以把display: flex到div#主，align-self: stretch到div#导航。

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

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

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

// CSS file
#main {
  display: flex;
}

#navigation {
  align-self: stretch;
}

2022-09-28 19:16:29

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

我建议你看看跨浏览器CSS的等高列，没有黑客。

基本上，以浏览器兼容的方式使用CSS来实现这一点并不简单(但是对于表来说很简单)，所以请找到一个适当的预打包解决方案。

同样，答案也取决于你想要100%的高度还是相同的高度。通常都是等高的。如果是100%高，答案就略有不同。

2009-07-13 22:21:41

(在另一个回答中提到了Dmity的Less代码)我猜这是某种“伪代码”?

据我所知，尝试使用人造柱技术应该可以做到这一点。

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

希望这对你有所帮助。

2009-07-13 22:21:44

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

推荐文章

最新文章

标签