CSS：底部块调整大小强制顶部块缩小（在固定大小的容器内）

I search for a CSS solution for the following problem. Inside a container we have two blocks, vertically aligned so, that they fill the the whole area of the container, do not overlap and as the bottom one enlarges, the top one shrinks (without stretching out of container size).

我为以下问题搜索CSS解决方案。在容器内部，我们有两个块，垂直对齐，它们填充容器的整个区域，不重叠，当底部扩大，顶部收缩（没有伸出容器大小）。

Consider we start with the layout created by code below (go see it in browser). The following two requirements must be met:

考虑我们从下面的代码创建的布局开始（在浏览器中查看）。必须满足以下两个要求：

When the size of the .box is changed, .top and .bottom together fill the whole area of it, but the height of the .bottom remains fixed.

当.box的大小改变时，.top和.bottom一起填充它的整个区域，但.bottom的高度保持固定。
When the height of .bottom is changed, the .top's height is changed; the .box is not affected.

当.bottom的高度改变时，.top的高度会改变; .box不受影响。

So, I want the whole this box-model to be controlled (e.g. modified by JavaScript) by only .box's width/height and .bottoms's height, all the rest is adjusted by CSS automatically.

所以，我希望整个这个盒子模型只能被.box的宽度/高度和.bottoms的高度控制（例如由JavaScript修改），其余的全部由CSS自动调整。

The code (it is far away from solution and I know it can be done with little JavaScript, but let's find a pure CSS solution):

代码（它远离解决方案，我知道它可以用很少的JavaScript完成，但让我们找到一个纯CSS解决方案）：

<html>
  <head>
    <style>
      .box {
          position:fixed;
          top:20px;
          left:20px;
          width:200px;  /* these adjust the whole box size,*/
          height:320px; /* children cannot stretch out of these limits*/
          background:silver;
      }
      .top {
          clear:left;
          height:280px; /* we want it to be like '100%-bottom's height'!*/
          margin: 3px;
          background: white;
       border: red 1px solid;
      }
      .bottom {
          position:absolute;
          bottom:0;
          //top:0;
          left:0;
          right:0;
          margin: 3px;
          height: 27px; /* this adjusts how top & bottom are sized inside the box*/
          background: white;
       border: blue 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
  </body>
</html>

2 个解决方案

#1

I don't see any reason why do you want to do this and no control the height with the .top .bottom themselves.

我没有看到任何理由你为什么要这样做而且没有用.top .bottom本身来控制高度。

with this code the height is depends on the text inside the divs.

使用此代码，高度取决于div内的文本。

<html>
  <head>
    <style>
      .box {
        border:1px solid #583454;
          position:fixed;
          top:20px;
          left:20px;
          width:200px;  // these adjust the whole box size,
          height:320px; // children cannot stretch out of these limits
          background:silver;
      }
      .top {
          clear:left;
          height:280px; // we want it to be like '100%-bottom's height'!
          margin: 3px;
          background: white;
       border: red 1px solid;
      }
      .bottom {

          bottom:0;
          //top:0;
          left:0;
          right:0;
          margin: 3px;
          height: 27px; // this adjusts how top & bottom are sized inside the box
          background: white;
       border: blue 1px solid;
      }
    </style>
  </head>
  <body>
    <div class="box">
        <div class="top">Top</div>
        <div class="bottom">Bottom</div>
    </div>
  </body>
</html>

#2

I think you simply have to change:

我想你只需改变：

.top { 
          height:280px;
      }

to:

至：

.top { 
          height:100%;
      }

Then, if you adjust the height of "box", the height of "top" adjusts to fill the extra space while the height of "bottom" stays the same. And when you change the height of "bottom", the height of "top" adjusts to fill the space but the height of "box" stays the same.

然后，如果你调整“盒子”的高度，“顶部”的高度调整以填充额外的空间，而“底部”的高度保持不变。当您更改“底部”的高度时，“顶部”的高度会调整以填充空间，但“框”的高度保持不变。

Does that solve your problem?

这会解决你的问题吗？

#1