Высота: 100% не считается - PullRequest
Новая
       11

Высота: 100% не считается

0 голосов
/ 17 марта 2010

Я бы хотел смоделировать поведение таблицы с помощью div.

У меня есть структура моего макета, разделенная на три столбца: 

div#wrapper {
  width:800px;
  float:left;
  height:100%;
  margin-top:7px;
  text-align:center;
}
div#left {
  width:167px;
  float:left;
  padding-bottom:50px;
  margin-right:3px;
}
div#main {
  width:454px;
  float:left;
}
div#right {
  width:167px;
  float:left;
  margin-left:3px;
}

Обертка - это контейнер из трех столбцов: левый, основной, правый

div "main" имеет переменное содержимое, поэтому в некоторых случаях оно длиннее, а в другом - очень короткое. Когда содержимое меняется, div-оболочка адаптируется, и это нормально, но левый и правый столбцы не адаптируются к оболочке.

P.S. Без doctype проблем нет, на самом деле я устанавливаю высоту left, main и right на 100%, но когда я вставляю transional.dtd, высота div не учитывается.

Как можно решить эту проблему?

Извините за мой английский !!

Ответы [ 4 ]

1 голос
/ 17 марта 2010

Я согласен с @Neurofluxation, поэтому давайте посмотрим, что я могу найти в Google:

100% Высота компоновки с использованием CSS а также CSS Faux Columns

0 голосов
/ 17 марта 2010

пытаюсь использовать 

min-height:100%;

но я могу решить проблему.

Я читал на другом форуме, что невозможно с фиксированной высотой xhtml: 100% с div, и что единственный способ решить эту проблему - использовать JQuery?

0 голосов
/ 17 марта 2010

вы должны использовать jQuery 

<script type="text/javascript">
$(this).load(function() {
   alert(document.documentElement.clientHeight + '+' + $(window).height());
   if ($(window).height() - 250 > 300)
      $('#content').css('min-height', '224px');
   else
      $('#content').css('min-height', $(window).height() - 250);
    }
);
$(this).resize(function() {
    if ($(window).height() - 250 > 300)
       $('#content').css('min-height', '224px');
    else
       $('#content').css('min-height', $(window).height() - 250);
    }
);
</script>

<div id="content" style="min-height:350px;">

</div>

просто измените числовые цифры высот.

0 голосов
/ 17 марта 2010

Вы также можете попытаться вставить: 

min-height: 100%;

, чтобы покрыть себя:)

...