Question

假设有两个元素垂直放置在一起，如下图所示：

条件是div1的高度是自动/动态的，因为它取决于其内容。问题是如何设置div2的CSS样式以确保div1和div2的高度总和是固定的，例如：

当<div1>的高度为<div2>时，

1000px和div1的总高度为div1，而200px的高度为自动，div2的高度将自动调整为1000-200=800px;当div1的高度为400px时，div2的高度将自动调整为1000-400=600px;

这有什么解决方案吗？我试图使用flex，但无法弄清楚如何。

Answer 1

您可以flex: 1使用.div2。这与将flex-grow和flex-shrink设置为1并将flex-basis设置为自动相同。现在，.div1的高度可以是任何值，.div2将增长或缩小以填充剩余高度。

＆＃13;

.parent-container {
  display: flex;
  flex-direction: column;
  height: 300px;
  background: black;
}

.div1 {
  height: 200px;
  background: pink;
}

.div2 {
  flex: 1;
  background: lightblue;
}

＆＃13;

<div class="parent-container">
  <div class="div1"></div>
  <div class="div2"></div>
</div>

＆＃13;

Answer 2

如果您对jquery持开放态度，那很简单，

var totalHeight = 500;
$(document).ready(function (){
    $('.two').height(totalHeight-$('.one').height());
});

//only if you want to update the content after page load.
$(document).bind('DOMSubtreeModified',function (){
    $('.two').height(totalHeight-$('.one').height());
})

div{
    width: 300px;
    background: red;
}
.two{
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">one</div>
<div class="two">two</div>

我在这里设置总高度为500px。

$(document).ready(function (){
    $('.two').height(totalHeight-$('.one').height());
});

这将设置页面加载时第二个div的高度。和

$(document).bind('DOMSubtreeModified',function (){
    $('.two').height(totalHeight-$('.one').height());
})

仅当您希望在页面加载后更改内容时才需要此选项。其他明智的你可以忽略这一点。

根据其他元素自动调整元素高度

2 个答案: