Question

我想把我的基本网页布局放在一起，我遇到了一些问题。请有人帮我解决一下。我对CSS的理解并不是很棒。

粘性页脚正在工作，我希望在页眉和页脚之间有一个页面左右两列。我不确定我的方式是否正确。
在左右列和页眉和页脚之间我想放置内容。我该如何居中。我找不到合适的方法，因为总有溢出，我希望它只能在左右列之间切换，没有什么可以切断。

感谢您的帮助！

编辑：我已经更新了我的布局并使用了一些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%;
}

Answer 1

正如你所说，你是CSS的新手，但我非常推荐你的布局，它似乎是10年前的标准。（没有任何违法行为，你是新来的，你不会知道那些事情，也不会知道。）

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

回答你的问题：

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

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

我自己会告诉你，但是这个教程编写得很好，易于理解和实现。

对于集中使用容器：

margin: 0 auto;

可以使用的居中文本：

text-align: center;

希望有所帮助。

网页布局结构

1 个答案: