HTML / CSS - Inner-Div 100% высоты по нескольким столбцам? - PullRequest
Новая
       0

HTML / CSS - Inner-Div 100% высоты по нескольким столбцам?

2 голосов
/ 22 июня 2010

Я посмотрел на многие другие вопросы, но думаю, что моя проблема немного другая, и если я ошибаюсь, я был бы рад увидеть ссылку и закрыть этот вопрос.

Вы можетесм. мою проблему здесь: http://www.phoenixdev.net/test.html

Правая граница первого подраздела не опускается полностью - мне это нужно, иначе это выглядит довольно странно.

Я могуэто в jQuery, но я сейчас смотрю на чистое решение HTML / CSS.

Возможно ли это?Если да, то как?

РЕДАКТИРОВАТЬ

Искусственные столбцы не будут работать, потому что для этого требуется фоновое изображение.Количество столбцов может меняться 1-5, поэтому граница должна отражать это.Легко делается в CSS, но не с фоновыми изображениями.

Ответы [ 4 ]

1 голос
/ 23 июня 2010

Я всегда использовал этот метод, и он работал как шарм: http://www.positioniseverything.net/articles/onetruelayout/equalheight

Я попробовал его с помощью Firebug на вашем сайте и используя:

.content {

...

отступ: 9999 пикселей;

отступ: -9999 пикселей;

}

, казалось, это исправило.Дайте мне знать, если это работает для вас.

1 голос
/ 22 июня 2010

Это на самом деле старый вопрос, возможно, не о SO, а о CSS в целом.Есть несколько способов сделать это.Одним из них является использование фонового изображения - это будет сложно, так как у вас нестабильный макет - если вы исправите ширину столбца, у вас возникла проблема, это сработает, или вы можете отправить положение изображения с использованием процента в этомcase 33%.

Два, вы можете обернуть div вокруг других столбцов, чтобы у более короткого столбца была высота двух других - это довольно сложно.

Три - небеспокойство об этом делает особенность этого.Дело в том, что если вы отсортируете его по одному столбцу, вдруг «клиент» решит, что ему нужно меньше содержимого в одном из других столбцов, и тогда у вас тоже возникнет проблема.

1 голос
/ 22 июня 2010

Может также отображаться другая опция: таблица 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>equal heights</title>
  <style type="text/css">
  #container
  {
    border:1px solid #000;
    display:table;
  }
  #container div
  {
    display:table-cell;
    width:200px;
    border:1px solid red;
  }
  </style>
<body>

<div id="container">
  <div>eins</div>
  <div>zwei<br />zwei<br />zwei<br /></div>
  <div>drei</div>
</div>

</body>
</html>

К сожалению, она не поддерживается некоторыми браузерами, см. http://reference.sitepoint.com/css/display или http://www.sitepoint.com/books/csswrong1/

0 голосов
/ 22 июня 2010

Я знаю, что это не лучшее решение, но, возможно, Faux Columns в любом случае может помочь. Смотри http://www.alistapart.com/articles/fauxcolumns/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...