Как сделать контейнер div растягиваться вертикально, чтобы соответствовать таблице в IE?

Question

У меня возникли проблемы с довольно простым расположением трех столбцов, где есть контейнер div, который содержит несколько других div, некоторые из которых в основном присутствуют для дизайна, основной из которых содержит таблицу. Так Актуальные выглядит как это:

<div id="wrapper"> 
    <div id="left-side-decoration">&nbsp;</div> 
    <div id="right-side-decoration">&nbsp;</div> 
    <div id="content"> 
    <table id="datatable"> 
     <thead><th>Title</th></thead> 
     <tr><td>Content Row 1</td></tr> 
     <tr><td>Content Row 2</td></tr> 
     <tr><td>Content Row 3</td></tr> 
    </table> 
    </div> 
    <div id="footer-decoration"> 
</div> 

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

#wrapper 
    { 
    height: 100%; 
    } 
#left-side-decoration 
    { 
     float: left; 
     height: 100%; 
     width: 154px; 
     background-color: red; 
    } 
#right-side-decoration 
    { 
     float: right; 
     width: 1em; 
     height: 100%; 
     background-color: red; 
    } 
#content 
    { 
    height: 100%; 
    border: 1px solid #6f9dd9; 
    margin-left: 154px; 
    margin-right: 1em; 
    } 
#footer-decoration 
    { 
    height: 3em; 
    clear: both; 
    background-color: green; 
    } 

Теперь это работает отлично в Firefox и часто в IE, но datatable может получить выше, чем высота окна браузера. Когда это происходит, оно исчезает под делением footer-decoration и появляется под ним для пользователей Internet Explorer.

Я попытался изменить настройки переполнения, но я не хочу потерять контент в нижней части страницы или иметь полосу прокрутки, я действительно хочу, чтобы страница была не менее высота в окне браузера, но, возможно, немного выше. Очевидным для этого было бы использовать min-height, но когда я изменю высоту обертки, чтобы использовать как left-side-decoration, так и right-side-decoration сжиматься до нескольких пикселей, и ни одна из 100-процентной высоты или 100% минимальной высоты не меняется Это.

Так что, если я использую height: 100%, мой стол выпадает из нижней части страницы в IE, если я использую min-height: 100%, мои боковые панели сокращаются до нуля. Я предполагаю, что проблема с минимальной высотой относится к разворачиванию div и, таким образом, из потока страниц, но я не вижу в этом хороших способов исправить это. Любые решения?

Answer 1

Каждое долговечное решение, которое я видел, включает в себя Javascript, который будет следить за размером окна браузера и обновлять размер соответствующих тегов div, чтобы он соответствовал должным образом.

Вам нужно будет обработать загрузку начальной страницы, а также событие «изменить размер». Вам также может потребоваться перерасчет размеров после обратной передачи.