Плавали DIV, чтобы заполнить оставшееся пространство

У меня есть CodePen для этого создан здесь: http://codepen.io/anon/pen/Isqou Плавали DIV, чтобы заполнить оставшееся пространство

div.linksBox { 
border:1px solid #a9a9a9; 
background:#fff; 
-moz-box-shadow:0 5px 12px rgba(0,0,0,0.3); 
-webkit-box-shadow:0 5px 12px rgba(0,0,0,0.3); 
box-shadow:0 5px 12px rgba(0,0,0,0.3); 
margin:0 12px 12px 0; 

text-align:center; 
overflow:hidden; 
} 

<div id="topFloats" style="margin-top:5px; overflow:hidden; border:1px solid black; margin-top: 10px;"> 
    <div style="width:20px; height:340px; float:left; background-color:red;"></div> 
    <div id="rightFloatWrapper" class="linksBox"> 
     <div class="rollover linkIconLayout" id="" style='width: 134px; height: 122px; background-color:green;' href=""></div> 
     <div class="rollover linkIconLayout" id="" style='width: 142px; height: 112px; background-color:blue;' href=""</div> 
    </div> 
</div>

Изображение в красном (слева) плавали ДИВ задает высоту черной каймой дел. Мне нужен внутренний (drop-shadowed) div (минимальные размеры которого заданы размером его разделов контента) для расширения, чтобы заполнить оставшуюся часть пространства в черном граничном div.

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

источник

2014-09-10 XyberICE

Вы можете посмотреть [flexbox] (http://css-tricks.com/snippets/css/a-guide-to-flexbox/). В противном случае вам, вероятно, придется использовать ширину набора или javascript –

Спасибо @zach! Мне нужно поддерживать IE 9, поэтому я предполагаю, что мне придется использовать JavaScript. Хотя может быть и способ сделать это с помощью чистого CSS. – XyberICE

Решено. I ended up отказ от поплавков и использование position:absolute;right:0; bottom:0;top:0; на внутреннем (drop-shadowed) div. Трюк состоял в том, чтобы использовать right:5% и установить (ранее плаваемую) красную ширину div на то же самое (width:5%). Это достигало того, что я пытался делать с плавающими div и по-прежнему сохранял гибкость компоновки жидкости (с небольшим недостатком, что, если я меняю ширину, мне нужно обязательно изменить свойство right:).

Надеюсь, это поможет кому-то еще, кто пытается это сделать.

Cheers!

источник

2014-10-16 19:50:19 XyberICE

Плавали DIV, чтобы заполнить оставшееся пространство

ответ

Смежные вопросы