Как вырастить содержащийся элемент с плавающей точкой на всю высоту его контейнера? - PullRequest
Новая
       9

Как вырастить содержащийся элемент с плавающей точкой на всю высоту его контейнера?

4 голосов
/ 12 июня 2009

Сначала я задам основной вопрос, а затем подробно разбираюсь в том, почему я спрашиваю. У меня есть куча похожих элементов с плавающими блоками внутри <div>, и я установил overflow:auto на <div>, чтобы его высота увеличивалась для правильного размещения всех элементов внутри него.

Есть ли способ, используя только CSS и HTML, установить только первый плавающий элемент на полную высоту div?

Просто чтобы прояснить: я хочу увеличить содержание элемента до высоты контейнера , а не наоборот.

Я пытался добавить 

 height: 100%

к CSS первого плавающего элемента, но это не имеет никакого эффекта.

На мучительной детали. И если на ум придет лучший общий подход, который устранит эту конкретную проблему, я весь слух.

Я моделирую таблицу с кучей всплывающих <ul> элементов внутри <div>. Каждый список - это столбец в «таблице», а первый список - это столбец с меткой строки. Итак, для рендеринга следующее: 

         col A     col B
row 1     foo       baz

row 2     bar       bat

Я использую эту разметку: 

<div>
    <ul class='row-label'>
        <li>&nbsp;</li> *
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>

* должен быть неразрывный пробел в первом элементе списка 'row-label', но я не могу заставить SO показать &nbsp;

Внимательные читатели могут спросить: «А? Почему бы не использовать настоящий стол?» Два ответа:

  • Мой подход с использованием поддельных таблиц более семантически более подходит для моих данных. Данные более тесно связаны внутри каждого «столбца», чем внутри каждой «строки», но таблицы HTML предполагают обратное. Поэтому мне понадобится более сложный PHP на сервере для преобразования данных в таблицы HTML, и результат не будет иметь такого большого смысла. «Стол» здесь действительно больше визуальный эффект или эффект презентации, чем что-либо.

  • Я хотел оставить открытой возможность манипулировать отдельными столбцами в JavaScript (показывать их и скрывать в ответ на действия пользователя с эффектами перехода). Из того, что я мог сказать, когда я исследовал это, нет простого способа сделать это в стандартной таблице HTML - именно потому, что строка, а не столбец, является основной единицей таблицы HTML. Пожалуйста, стреляйте мне в контрпример, если я ошибаюсь.

CSS, упрощенный, выглядит так: 

div {
    overflow: auto;
}

div ul {
    float: left;
    list-style-type: none;
    padding: 0;
    margin: 0 0.5em;
}

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

         col A     col B     col C
row 1     foo       baz       bar

  col D     col E
   zab       oof

В конечном счете, я имею в виду лучшее решение, но самое простое немедленное решение - дать столбцу метки строки достаточную высоту, чтобы подтолкнуть эти обернутые столбцы в линию. Если я сделаю что-то вроде этого: 

ul.row-label {
     height: [lots of ems]
}

Тогда я получаю такой результат: 

         col A     col B     col C
row 1     foo       baz       bar

         col D     col E
          zab       oof

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

Ответы [ 3 ]

2 голосов
/ 12 июня 2009

Убедитесь, что вы установили display: block на элементы LI внутри вашего UL. Вы также должны указать свой UL-дисплей: блок, переполнение: скрытый и высота: 100%. По умолчанию элементы списка имеют встроенный блок, который игнорирует ваши настройки высоты.

Вот подтверждение концепции: 

<html>
<head>
<style type="text/css">
* { border: solid 1px black; }

div { overflow: auto; }

div ul 
{ 
    display: block; 
    height: 100%; 
    overflow: hidden; 
    float: left;
}
div ul li { display: block; }
</style>
</head>
<body>
<div>
    <ul class='row-label'>
        <li>&nbsp;</li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col A</li>
        <li>foo</li>
        <li>bar</li>
    </ul>
    <ul class='data-col'>
        <li class='data-header'>col B</li>
        <li>baz</li>
        <li>bat</li>
    </ul>
</div>
</body>
</html>

Предоставленный пример http://img526.imageshack.us/img526/9444/tablewithlists.png

0 голосов
/ 12 июня 2009

Может быть, это поможет с идеями? Я сам нашел этот фреймворк CSS:

http://www.blueprintcss.org/

0 голосов
/ 12 июня 2009

Во-первых, и как вы указали, ваш ДЕЙСТВИТЕЛЬНО ДОЛЖЕН использовать таблицы для табличных данных. Вы можете выполнять те же манипуляции с элементами в таблице, что и везде.

Я не знаю, почему вы захотите сделать такую ​​сумасшедшую вещь, но лучше всего просто поместить элементы .data-col в отдельный div, добавить левое поле и расположить их слева:

РЕДАКТИРОВАТЬ: код добавлен для моего здравомыслия 

ul, li {
  display: block;
  margin: 0px;
  padding: 0px;
}
ul {
  float: left;
  margin: 0px 5px;
}
li {
  height: 20px;
}
.data-cols {
  left: 0px;
  margin-left: 50px;
  overflow: hidden;
}

<div>
    <ul class='row-label'>
        <li> </li>
        <li>row 1</li>
        <li>row 2</li>
    </ul>
    <div class="data-cols">
        <ul class='data-col'>
            <li class='data-header'>col A</li>
            <li>foo</li>
            <li>bar</li>
        </ul>
        <ul class='data-col'>
            <li class='data-header'>col B</li>
            <li>baz</li>
            <li>bat</li>
        </ul>
    </div>
</div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...