абсолютная боковая панель выше содержимого clearfix?

Question

У меня проблема. Это код, у меня есть:

* { 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
} 
 
#wrapper { 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
#content { 
 
    float: left; 
 
    display: block; 
 
    width: 100%; 
 
    padding-right: 320px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    background-color: red; 
 
} 
 
#sidebar { 
 
    position: absolute; 
 
    background-color: green; 
 
    top: 0; 
 
    right: 0; 
 
    width: 300px; 
 
    overflow: hidden; 
 
}

<div id="wrapper"> 
 
    <div id="content">content</div> 
 
    <div id="sidebar">sidebar</div> 
 
</div> 
 
<!--end wrapper-->

Переполнение отлично работает до тех пор, пока #sidebar ниже #content, но когда #sidebar выше ростом он срезания части моего #sidebar содержания (очевидно).

Я пытался установить оба из них имеет высокие высоты, но результаты были трагичны - это дает мне некоторую космическую высоту и (возможно, потому, что один абсолютно?)

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

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

Я могу изменить #sidebar, чтобы плавать и использовать css calc для #content, но он не работает в IE8.

Я мог бы использовать $('#content').css('width', '100%').css('width', '-=320px');, но он не работает? Не знаю почему - он вычитает некоторое значение, но не 320px

Как это сделать?

Answer 1

EDIT (Второй ответ)

Fiddle using display:table;

CSS

#header { 
    background:orange; 
} 
#wrapper { 
display:table; 
} 
#content { 
    display:table-cell; 
    width:100%; 
    background: red; 
} 
#sidebar { 
display:table-cell; 
background: green; 
} 

#sidebar-inner { 
width:300px; 
} 
#footer { 
    background:blue; 
} 

HTML

<div id="header">Header</div> 
<div id="wrapper"> 
    <div id="content">Content</div> 
    <div id="sidebar"> 
     <div id="sidebar-inner"> 
     Sidebar 
     </div>  
    </div> 
</div> 
<div id="footer">Footer</div> 

Вот решение с помощью CSS прогибается. Fiddle

А вот еще с большим содержанием и заголовком Fiddle 2

CSS

#wrapper { 
    display:flex; 
} 
#content { 
    flex-grow:1; 
    background: red; 
} 
#sidebar { 
    flex-grow:0; 
    background: green; 
    width: 300px; 
} 
#footer { 
    background:blue; 
} 

HTML

<div id="wrapper"> 
    <div id="content">content</div> 
    <div id="sidebar">sidebar</div> 
</div> 
<div id="footer">Footer</div> 

Answer 2

РЕШЕНИЕ

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

Если вы имея подобный вопрос:

#content и #sidebar находятся на поплавках в настоящее время. #sidebar имеют фиксированную ширину 300px и #content100%.

И я сделал это:

$(window).on('load resize', function() { 
if ($(document).width() < 970) { 
    var $left = $('#content_main'); 
    $left.css('width', '100%').width($left.width() - 320); 
} 
else { 
    var $left = $('#content_main'); 
    $left.css('width', '970px').width($left.width() - 320); 
} 

});

Спасибо всем за ваш интерес, хорошо отдохните.