0

我创建了一个模板，我希望顶部菜单位于页面顶部并占据页面的整个宽度，然后

我希望左侧菜单和中心占据整个页面

并且页脚具有与顶部菜单相同的特征

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

这就是我尝试过的：点击我:)

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

先感谢您

4

2 回答 2

1

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

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;
}

小提琴

编辑：根据您的评论，这是一个更新的解决方案：

一种选择是将 a min-heighton设置.center为百分比。

使用 CSS 解决等高的侧边栏并不容易或直观。使用一种称为“人造列”的技术，该技术包括为背景图像.content而不是.left-menu直接为背景，您可以实现效果。我使用了 CSS3 渐变（使用带有 Compass 的 SCSS 使这更容易，但您可以手动完成所有浏览器前缀）。

更新的 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;
}

笔

于 2013-04-20T19:23:12.183 回答
0

解决我的问题的诀窍是：添加此 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-20T21:25:05.267 回答