CSS: изменение размера нижнего блока приводит к уменьшению верхнего блока (внутри контейнера фиксированного размера) - PullRequest
Новая
       4

CSS: изменение размера нижнего блока приводит к уменьшению верхнего блока (внутри контейнера фиксированного размера)

2 голосов
/ 22 января 2010

Я ищу решение CSS для следующей проблемы. Внутри контейнера у нас есть два блока, выровненных по вертикали так, чтобы они заполняли всю область контейнера, не перекрывались, а при увеличении нижнего из них верхний сокращался (не растягиваясь по размеру контейнера).

Предположим, мы начнем с макета, созданного с помощью кода ниже (посмотрите его в браузере). Следующие два требования должны быть выполнены:

  1. Когда размер .box изменяется, .top и .bottom вместе заполняют всю его область, но высота .bottom остается фиксированным.

  2. Когда высота из .bottom изменяется, .top ' высота изменяется; на .box это не влияет.

Итак, я хочу, чтобы вся эта блочная модель управлялась (например, изменялась с помощью JavaScript) только .box ширина / высота и .bottoms * высота все остальное настраивается CSS автоматически.

Код (он далек от решения, и я знаю, что это можно сделать с помощью небольшого количества 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 ]

0 голосов
/ 23 сентября 2010

Я думаю, вы просто должны изменить: 

.top { 
          height:280px;
      }

до: 

.top { 
          height:100%;
      }

Затем, если вы отрегулируете высоту «ящика», высота «верха» отрегулируется так, чтобы заполнить дополнительное пространство, в то время как высота «дна» останется неизменной. И когда вы изменяете высоту «дна», высота «верха» корректируется, чтобы заполнить пространство, но высота «ящика» остается неизменной.

Решает ли это вашу проблему?

0 голосов
/ 22 января 2010

Я не вижу причин, почему вы хотите сделать это, и не управляете высотой самими .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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...