CSS Dynamic Heights - PullRequest
Новая
       12

CSS Dynamic Heights

2 голосов
/ 06 августа 2009

У меня есть три тега div, обертка и два рядом друг с другом внутри обёртки: 

<div id="wrapper">
   <div id="left"></div>
   <div id="right"></div>
</div>

Я хочу создать условие, в котором тег <div id="left"> имеет переменную высоту, растягивая обертку.

В результате <div id="right"> расширится до любой высоты, на которую обернута оболочка.

Какой CSS это сделает? Спасибо!

Ответы [ 5 ]

4 голосов
/ 06 августа 2009

Возможно, я опаздываю на вечеринку, но действительно просто сделать то, что вы описываете, с помощью чистого CSS. Хитрость заключается в том, чтобы сделать #right абсолютно позиционированным и присвоить ему top и bottom из 0. Это растянет его до любой высоты, которую #left дает #wrapper. Вот полный рабочий пример: #left - зеленый, #right - синий, а #wrapper - красный, но его никогда не видели, потому что он полностью покрыт #left и #right. Попробуйте удалить строку bottom: 0;, чтобы увидеть, как она выглядит без нее. 

<html lang="en">
  <head>
    <title></title>

    <style type="text/css">
      #wrapper {
        background: #fdd;
        position: relative;
        width: 300px; /* left width + right width */
      }

      #left {
        background: #dfd;
        width: 200px;
      }

      #right {
        background: #ddf;
        bottom: 0;
        position: absolute;
        right: 0;
        top: 0;
        width: 100px;
      }
    </style>
  </head>

  <body>
    <div id="wrapper">
      <div id="left">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer augue</p>
        <p>massa, scelerisque non viverra sagittis, egestas nec erat. Aliquam vel</p>
      </div>
      <div id="right">
        <p>turpis metus. Sed id lorem eu urna suscipit porttitor. Nullam. </p>
      </div>
    </div>
  </body>
</html>
3 голосов
/ 06 августа 2009

Если вы собираетесь использовать Jquery, вы можете сделать это. 

$(document).ready(function(){
   var leftHt = $('#left').height();
   $('#right').css("height",leftHt);

});

Это не CSS, но это довольно просто и должно работать. Насколько мне известно, CSS просто не сможет легко это сделать.

Если у вас еще нет Jquery API, просто пройдите выше Javascript 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="javascript" language"javascript"></script>

Рабочий пример здесь:

http://michaelpstone.net/development/dynamic-height.html

2 голосов
/ 06 августа 2009

Нет действительно хорошего способа для #right соответствовать тому, кем стал #left. Вероятно, лучший способ сделать это: 

<div id="wrapper">
    <div id="right"></div> <!-- note that right comes before left -->
    <div id="left"></div>
</div>

Тогда имейте этот стиль: 

#left, #right {
    width: 50%; /* Adjust as needed */
#right {
    float: right;
}

Таким образом, #right не повлияет на длину страницы, но всегда будет #left. Тем не менее, #right все еще не будет простираться на длину #left. Я не знаю, по какой причине вам нужно было растянуть его до левого, но я предполагаю, что это что-то косметическое. Я бы попробовал применить его из #left или из #wrapper, если вы хотите, чтобы он повторялся до конца.

Например, если вы хотите, чтобы #left белый и #right красный: 

#left {
    background: #fff;
}
#wrapper {
    background: #f00;
}
0 голосов
/ 06 августа 2009

Если вы пытаетесь сделать фон или что-то и, следовательно, нуждаетесь в одинаковой высоте, я бы порекомендовал таблицы. Это намного проще. Если вам нужно использовать div и float, в частности, в этой статье представлен единственный способ, который я видел, который работает хорошо. Это для трех столбцов, но вы можете изменить его для двух:

http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm

0 голосов
/ 06 августа 2009

Лучшим практическим решением является таблица - см. [Этот вопрос SO] ( Сделать два плавающих элемента CSS одинаковой высоты ).

Конечно, у вас могут быть свои причины не использовать таблицы ...

...