Проблемы с компоновкой HTML5

Question

Я некоторое время работаю над макетом. Я решил поднять пример в jsFiddle.

http://jsfiddle.net/PSYgU/1/

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

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

/* PHP option to control the width of all content by wrapper via style */ 
/* PHP option to control which side to float the sidebar to via style */ 
<div id="wrapper" style="width:100%;"> 
    <aside style="float: right;">This Sidebar</aside> 
    <header>The Header</header> 
    <section>The Main Content Area</section> 
    <footer>The Footer</footer> 
</div> 

html, body { 
    min-height: 100%; 
    height: 100%; 
} 
#wrapper { 
    margin: 0; 
    padding: 0; 
    background: brown; 
    height: 100%; 
} 
aside { 
    width: 200px; 
    background: yellow; 
    height: 100%; 
} 
header { 
    height: 150px; 
    background: blue; 
    width: 100%; 
} 
section { 
    background: red; 
    width: 100%; 
    height: 100%; 
} 
footer { 
    height: 50px; 
    background: green; 
    width: 100%; 
} 

Answer 1

Потому что у вас есть раздел также на высоту 100%, а также лежит в обертке Виля принять полную высоту обертки так же, как на боковую панель.

пример: , когда тело/html и обертка имеют высоту 200 пикселей, что-либо внутри обертки элемента, высота которой на 100% будет иметь высоту 200 пикселей, если вы добавите заголовок внутри обертки с высотой 150 пикселей, вам нужно добавить это до 200 из ранее.

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

решение для этого состоит в том, чтобы сделать заголовок и раздел вместе высотой 100%, как заголовок 15% и раздел 85%.

Это будет означать, что оба они масштабируются, но боковая панель всегда будет одинаковой высоты.

<div id="wrapper"> 
    <aside style="float: right;">This Sidebar</aside> 
    <header>The Header</header> 
    <section>The Main Content Area</section> 
</div> 
<footer>The Footer</footer> 

 

    html, body { 
     min-height: 100%; 
     height: 100%; 
    } 
    #wrapper { 
     margin: 0; 
     padding: 0; 
     background: brown; 
     height: 100%; 
     width:100% 
    } 
    aside { 
     width: 200px; 
     background: yellow; 
     height: 100%; 
    } 
    header { 
     height: 15%; 
     background: blue; 
     width: 100%; 
    } 
    section { 
     background: red; 
     width: 100%; 
     height: 85%; 
    } 
    footer { 
     height: 50px; 
     background: green; 
     width: 100%; 
    }