Растяжение переменной переменной ширины родитель переменной высоты

Question

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

Ближайшее я пришел к использованию положения: абсолютное и установление высоты 100%. Но это вызывает проблему в том, что div, который должен быть сделан на 100% выше, имеет переменную ширину, поэтому я не могу применить дополнение к остальной части содержимого, чтобы вытащить его из-за абсолютно позиционированного элемента.

Вот примерно обращается пример окончательной идеи:

Обратите внимание, что номера на левой стороне может быть две или три цифры. Темно-серая область - это то, что должно быть полной высотой ячейки.

Я начинаю думать, что просто использование стола - это самый простой выход. Возможно, ударив о том, что серые области имеют ту же ширину, сколько бы ни было наибольшее число.

Я пропустил намного лучший (кросс-браузерный, не-JS) способ?

Answer 1

С таким простым расположением, абсолютное позиционирование, безусловно, лучше всего, поэтому вы оказались на правильном пути. Хитрость заключается не в установке height:100% (потому что высота переменной), но и для установки top:0;bottom:0;. Кроме того, вам не нужно использовать отдельный DIV для номера, вы можете просто использовать псевдо-элемент - см ниже фрагмент кода:

* { margin:0; padding:0; } 
 
ul { font-family: sans-serif; list-style:none;} 
 
ul>li { position: relative; min-height: 35px; border: 1px solid #000; padding: 10px 10px 10px 45px;} 
 
ul>li:before { position: absolute; top:0; bottom:0; left:0; width: 40px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}

<ul> 
 
    <li data-id="1">Lorem ipsum dolor sit ame</li> 
 
    <li data-id="37">Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</li> 
 
    <li data-id="12">Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</li> 
 
</ul>

EDIT

Этот это способ сделать это с нефиксированной шириной (и используя display: table и все еще используя псевдоэлементы). Я бы по-прежнему выбрал способ position: absolute, потому что я думаю, что макет выглядит лучше, но вот он. В CSS существует около тысячи способов скинуть кошку.

* { margin:0; padding:0; } 
 
    ul { font-family: sans-serif; list-style:none;} 
 
    ul>li { display: table; position: relative; border: 1px solid #000; width: 100%;} 
 
    ul>li>div { display: table-cell;padding: 10px; } 
 
    ul>li:before { display: table-cell; padding: 10px; text-align: center; background: #999; content: attr(data-id); color: #fff; padding-top: 10px;}

<ul> 
 
<li data-id="1"><div>Lorem ipsum dolor sit ame</div></li> 
 
<li data-id="37"><div>Phasellus porta nulla urna, at ornare erat porttitor sit amet. Aliquam congue quam et aliquet sollicitudin. Duis volutpat metus tellus, at volutpat eros scelerisque non. Praesent metus lectus, malesuada eget metus vel, euismod dictum ex.</div></li> 
 
<li data-id="12"><div>Vestibulum ultrices augue libero, vitae sodales mi accumsan et. Etiam scelerisque, eros sed faucibus sollicitudin, lectus orci tincidunt sem, eu dapibus dui ante nec tortor. Nullam efficitur sapien et dolor aliquet bibendum. Nunc rhoncus augue at ligula sagittis, nec posuere urna lobortis. Nunc faucibus ipsum dolor, nec egestas nunc dapibus nec. Quisque sit amet suscipit est. Quisque sollicitudin tempus tincidunt. Mauris vitae est condimentum, sagittis metus vel, pellentesque turpis.</div></li> 
 
</ul>