开发者

CSS: Bottom block resize forces top block to shrink (inside a fixed-size container)

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).

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

  1. 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.

  2. When the height of .bottom is changed, the .top's height is changed; the .box is not affected.

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.

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):

<html>
  <head>
    <style>
      开发者_JS百科.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>


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

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

<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>


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?

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜