0

我正在尝试将我的基本网页布局放在一起，但遇到了一些问题。有人可以帮我解决它。我对 CSS 的理解并不高明。

代码：http: //jsfiddle.net/HJLzt/

  1. 粘性页脚正在工作，我希望在页眉和页脚之间有一个页面左右的列。我不确定我这样做的方式是否正确。

  2. 在左右列和页眉和页脚之间我想放置内容。我该如何居中。我找不到合适的方法，因为总是有溢出，我希望它只在左右列之间移动，没有什么可以切断的。

谢谢您的帮助！

编辑：我已经更新了我的布局并使用了一些 jquery 来提供帮助。我知道我应该尝试让一切都在 css 中运行，但这似乎是不可能的。

也许我应该补充一点，我想要一个白板作为主题。我想要一个木制框架，所以侧边栏总是必须连接到页眉和页脚，因为顶部和底部框架穿过那里。

如果有人可以看看并告诉我这是否可以。

* { margin:0; padding:0; }

html, body, #wrap { height: 100%; }

body > #wrap {height: auto; min-height: 100%;}

#main { padding-bottom: 150px; }  /* must be same height as the footer */

#main header{
    height: 100px;
    width: 100%;
    background-color: #5d3be6;
}

footer{
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
    background-color: #afeba4; 
}


/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

#layout_left{
    float: left;
    width: 100px;
    min-height: 100%;
    height: 100%;
    background-color: #f21ce7;
}

#layout_right{

    float: right;
    width: 100px;
    min-height: 100%;
    height: 100%;   
    background-color: #f21ce7;
}

#content_layout{
    border-left: 100px solid #e4f662;
    border-right: 100px solid #e4f662;
    width: auto;
    height: auto;
    background-color: #c36161;
}

#content{
    margin: auto;
    width: 96%;
}
4

1 回答 1

0

正如您所说，您是 CSS 新手，但我强烈建议您不要使用您的布局，这似乎是 10 年前的标准。（当然没有冒犯的意思，你是新手，你还不知道该做什么和不该做什么）。

使用谷歌搜索在线投资组合示例！

回答你的问题：

我认识你的粘性页脚代码，我也没有为我工作，也不完全。

它效果不佳，我建议： http ://css-tricks.com/snippets/css/sticky-footer/

我会亲自告诉你，但该教程写得很好，易于理解和实施。

对于居中容器使用： 

margin: 0 auto;

您可以使用的居中文本： 

text-align: center;

希望有帮助。

于 2012-11-10T15:33:07.980 回答