Question

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

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

当.box的尺寸发生变化时，.top和.bottom会一起填充整个区域，但 <{1}}的身高仍然是固定的。
当.bottom的身高发生变化时，.bottom的身高会发生变化; .top不受影响。

所以，我希望只用.box的宽度/高度和.box来控制整个这个盒子模型（例如用JavaScript修改） em> height ，所有其余部分由CSS自动调整。

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

.bottoms

Answer 1

我没有看到任何理由您为什么要这样做而且没有.top .bottom自己控制身高。

使用此代码，高度取决于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>

Answer 2

我认为你只需改变：

.top { 
          height:280px;
      }

到：

.top { 
          height:100%;
      }

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

这能解决您的问题吗？

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

2 个答案: