如何根据其中一个的大小调整divs高度，并覆盖100％？ [英] How to adjust divs height according the size of one of them and covering 100%?

问题描述

我有一个主要div，覆盖网页中100％的可用空间，它包含三个其他div，如下所示：

I have one main div covering the 100% of the available space in webpage, and it contains three others divs, like this:

<div id="container">
    <div id="header"/>
    <div id="content"/>
    <div id="footer"/>
</div>

我需要两个（黄色的）可调整大小，因为它们的内容是动态的，有时需要多于一行的文本。所以，我需要的是他们覆盖20％的可用空间，但如果他们需要更多的调整大小，使中心的小。我应该阅读什么？我找不到关键字google。非常感谢！
这是一个不工作的演示 haha​​：

I need two of them (the yellow ones) to be resizable, because their content is dynamic and sometimes need more than a single line of text. So, what I need is they cover the 20% of the available space but if they need more to resize and make the center div smaller. What should I read about? I don't find the keywords to google it. Thanks a lot! This is a "not-working demo" haha:

推荐答案

我不相信这些答案都能理解这个问题。

I don't believe these answers are understanding the question.

，你想让顶部和底部具有一定的最小高度（例如每个20％），中心填充剩余部分。

If I get you correctly, you want to have the top and bottom be some minimum height (say 20% each), and the center fill the rest.

在这种情况下，你必须使用JavaScript。找到窗口的高度，并设置top和bot有一个最小高度。这将允许他们缩放。从那里你将得到头部和脚的高度，从窗口的高度减去它们，并将内容区域设置为那个高度。

In that case you will have to use JavaScript. Find the height of window and set top and bot to have a min-height. This will allow them to scale. From there you will get the height of the head and the foot, subtract them from the height of window, and set the content area to be that height.

我会给你写一个例子，但听起来你想自己做，我赞扬。

I would write you out an example but it sounds like you want to do it yourself, which I commend.

这篇关于如何根据其中一个的大小调整divs高度，并覆盖100％？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！