创建一个CSS模板，覆盖整个tha页面无边距，即使这个comtent几乎为空

我创建了一个模板，我希望顶层菜单位于页面的顶部，并占据整个页面的宽度页面后创建一个CSS模板，覆盖整个tha页面无边距，即使这个comtent几乎为空

我想在左边的菜单和中心采取全页面

和页脚中的顶级菜单

相同caracteristics，如果左侧菜单或内容中心很小：整个页面由中心和左侧菜单覆盖，底部没有滚动条的页脚

这是我的尝试：click me :)

#page{ 
    background-color : black;  
} 
#top-menu{ 
    background-color : yellow; 
} 
#left-menu{ 
    background-color : blue; 
    float:left; 
} 
#center{ 
    background-color : red; 
} 
#footer{ 
    background-color : green; 
}

预先感谢您

来源

2013-04-20 simonTifo

使用了高度的百分比和宽度可以达到你想要的效果：

html, body, .page { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
.top-menu{ 
    background: yellow; 
    height: 15%; 
} 
.left-menu{ 
    background: blue; 
    float:left; 
    height: 75%; 
} 
.center{ 
    background: red; 
    height: 75%; 
} 
.footer{ 
    height: 10%; 
    background: green; 
}

Fiddle

编辑：根据您的意见，这里是一个更新的解决方案：

一个选项是设置.centermin-height百分比。

具有相同高度的侧边栏不容易或直观地用CSS解决。使用名为'faux columns'的技术，可以直接使用背景图像而不是背景.left-menu，您可以达到该效果。我使用了CSS3渐变（使用SCSS和Pen中的Compass使这更容易，但是您可以手动执行所有浏览器前缀）。

更新CSS：

html, body, .page { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

.top-menu { 
    background: yellow; 
    height: 15%; 
} 

.left-menu { 
    float: left; 
    width: 25%; 
} 

.center { 
    background: red; 
    background: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #0000ff), color-stop(25%, #0000ff), color-stop(25%, #ff0000)); 
    background: -webkit-linear-gradient(left, #0000ff, #0000ff 25%, #ff0000 25%); 
    background: -moz-linear-gradient(left, #0000ff, #0000ff 25%, #ff0000 25%); 
    background: -o-linear-gradient(left, #0000ff, #0000ff 25%, #ff0000 25%); 
    background: linear-gradient(left, #0000ff, #0000ff 25%, #ff0000 25%); 
    min-height: 75%; 
    padding-left: 26%; 
} 

.footer { 
    height: 10%; 
    background: green; 
} 

p { 
    margin: 0; 
}

Pen

来源

2013-04-20 19:23:12 bookcasey

谢谢:)，它的工作原理，但在中心的内容是大（需要比高度更它不起作用 – simonTifo 2013-04-20 19:31:29

当内容大于浏览器空间时，你想要发生什么？根据你想要的效果，在'.center'上添加'overflow：scroll'或设置一个'min-height'。 – bookcasey 2013-04-20 19:44:47

我测试了最小高度，它可以工作，但左侧菜单的高度并不改变，中心占据页面的整个高度 – simonTifo 2013-04-20 19:48:57

在这里解决我的问题是招：添加此jQuery代码：

<script src="jquery-1.9.1.min.js" ></script> 
<script> 
$(function(){ 
$('#left-menu').height($('#center').height()); 
}); 
</script>

后我的html代码：

<div id="page" > 
    <div id="top-menu" > 
     content of top menu 
    </div> 
    <div id="left-menu" > 
     content of left menu 
    </div> 
    <div id="center" > 

<p>content of center</p><p>content of center</p><p>content of center</p><p>content of center</p><p>content of center</p> 

</div> 
    <div id="footer" > 
     content of footer 
    </div> 
</div>

这里是CSS：

html, body, #page { 
    height: 100%; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 
#top-menu{ 
    background: yellow; 
    height: 6%; 
} 
#left-menu{ 
    background: blue; 
    float:left; 
    min-height: 90%; 
    min-width: 15%; 
} 
#center{ 
    background: brown; 
    min-height: 90%; 

} 
#footer{ 
    clear : both; 
    height: 4%; 
    background: green; 
} 
p{ 
margin : 0; 
}

@bookcasey感谢您的援助之手;）

来源

2013-04-20 21:25:05 simonTifo

创建一个CSS模板，覆盖整个tha页面无边距，即使这个comtent几乎为空

回答

相关问题