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％的部分，也奠定了包装中的西港岛线是采取包装就像侧边栏的完整高度。

示例： 当body/html和包装的高度为200px时，如果在高度为150px的包装中添加标头，则包含100％高度的元素包装中的任何东西都将具有200px的高度，到之前的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%; 
    }