html5自动把某个层放在屏幕底部,扩展HTML区到屏幕的底部，并创建一个使用HTML5和CSS...

我试图创建一个页面设置有两个导航区域(顶部和左)与此类似顶部和左侧菜单栏：扩展HTML区到屏幕的底部，并创建一个使用HTML5和CSS

浅灰色区域是每个页面的主要内容所在的位置。左边是第二个导航菜单，应该延伸到屏幕的底部，并与主内容区域保持一致。

我不知道如何调整它们，以便左侧菜单和主要内容区域向下延伸到屏幕底部。我使用宽度百分比，浮点数和位置CSS属性将它们相邻排列(显示属性无效)。我认为，问题是，我使用的主推内容面积达95个像素：

bottom: 95px;

否则，左侧导航菜单的右下角和主要内容区域的左上角相互接触对角线，标题区域下方有一个很大的白色间隙，然后到达浅灰色主要内容区域。

我发现将高度延伸到底部的唯一方法是以像素为单位设置它们的高度，但由于我将主内容区域向上移动了95px，因此主体底部内容区域下面有一个白色的间隙，甚至没有左侧的导航菜单。我的HTML secture看起来是这样的：

的导航标签遵循UL李模式

更新

我能得到我的CSS和HTML5的工作，这样的位置是正确的但当没有足够内容自动执行时，左侧导航菜单和浅灰色主内容区域仍不会展开到屏幕底部。我如何强制这个？用100％或px值设置它们的高度似乎不起作用。这是我的HTML，CSS和Chrome中查看的结果。

• xxx
• xxxxx

Title

Welcome test!

Log Off

• Home
• xxxx
• xxxx
• xxx
• xxxx
• xxxx
• xxxx
• xxxx
• xxxx

content

/* General */

body {

margin: 0;

padding: 0;

border: 0;

height: 100%;

}

/* Header */

header {

text-align: left;

float: right;

position: relative;

width: 90.5%;

}

div#titleUserLogin {

color: #fff;

background-color: #303030;

display: inline-block;

width: 100%;

}

div#titleUserLogin h1 {

display: inline;

}

div#titleUserLogin a {

text-align: right;

float: right;

}

/* Navigation menus */

nav#topMenu ul {

padding: 0 0 2px;

position: relative;

display: inline;

}

nav#topMenu ul li {

list-style: none;

display: inline;

}

nav#topMenu ul li a {

background-color: #303030;

color: #fff;

-webkit-border-radius: 4px 4px 0 0;

-moz-border-radius: 4px 4px 0 0;

padding: 10px 20px;

line-height: 2.8;

text-decoration: none;

}

nav#leftMenu {

background-color: #303030;

position: relative;

float: left;

width: 9%;

}

nav#leftMenu ul {

position: relative;

}

nav#leftMenu ul li {

list-style: none;

}

/* main content */

section#main {

background-color: #d7d7d7;

height: 100%;

width: 90.5%;

float: right;

height: 100%;

}

2011-08-09

Ben

+0

的jsfiddle链接将是有益的:) –

+0

或至少发表您的布局的CSS –

+0

试试这个演示：http://jsfiddle.net/rathoreahsan/Dyy4M/这可能会有助于风格你的CSS你想要的。 –