раздел «резиновая лента» в нижнем колонтитуле с только css

Question

Я видел этот вопрос много раз, но еще не видел ответа. Есть ли способ воспроизвести поведение ниже, используя div и css, а не таблицу? Не хотел бы использовать javascript.

http://jsfiddle.net/6vmkreyv/7/

<style> 
table.footer { 
width:100%; 
} 
td.footer-expandable { 
width:100%; 
border: 1px solid green; 
white-space: nowrap; 
text-overflow: clip; 
} 
td.footer-fixed { 
white-space: nowrap; 
border: 1px solid blue; 
} 
</style> 
.... 
<table class="footer"> 
<tr> 
    <td class="footer-expandable"> 
    Expandable section.<br/> 
    It should expand/collapse as necessary to fill all available space. 
    </td> 
    <td class="footer-fixed"> 
    Fixed width section.<br/> 
    It should expand just enough to fit it's contents. 
    </td> 
</tr> 

Часть 2 вопроса будет как обрезать текст в разделе «расширяемой», так что это не перенос слов?

Answer 1

Вы имеете в виду вот это?

HTML:

<div id="footer"> 
    <div id="right">Expand just enough to fit</div> 
    <div id="left">This one will fill any remaining space before breaking down to the next line. It will not underflow on the right side do to the right side having a 100% margin height, even if this DIV spans for several lines. It will eventually, and that can be fixed by putting a margin of more than 100%.</div> 
</div> 

CSS:

#footer #right { 
    float:right; 
    border:1px solid black; 
    margin-bottom:100%; 
} 
#footer #left { 
    border:1px solid black; 
} 

Fiddle: http://jsfiddle.net/64chLqdr/1/

Обратите внимание, что ширина #footer будет определять, сколько margin-bottom:100% есть. Они будут равны.

Answer 2

Вы можете использовать width: calc(100% - 350px) для расчета ширины div.

.wrapper { 
 
    width: 100%; 
 
} 
 
.dynamic { 
 
    border: 1px solid red; 
 
    width: calc(100% - 350px); 
 
    float: left; 
 
    box-sizing: border-box; 
 
} 
 
.fixed { 
 
    border: 1px solid green; 
 
    width: 350px; 
 
    float: left; 
 
    box-sizing: border-box; 
 
}

<div class="wrapper"> 
 
    <div class="dynamic"> 
 
    Expandable section. 
 
    <br/>It should expand/collapse as necessary to fill all available space. 
 
    </div> 
 
    <div class="fixed"> 
 
    Fixed width section. 
 
    <br/>It should expand just enough to fit it's contents. 
 
    </div> 
 
</div>

JSFiddle for responsiveness