我有一个标题，它适用于所有页面，我在每个页面中都调用它， 在标题下方我想在消息上应用 css 样式，如图中所示， 但是为什么消息被本地化在标题后面，这是无法理解的.. 我想要类似的东西，顶部有页眉，底部有页脚，页面中央有一 strip 有 CSS 的集中消息..
这是图片和代码。
html, body {
margin: 0;
padding: 0;
}
#header {
width:100%;
height:auto;
text-align:center;
float:left;
background: #3fa46a;
}
#footer {
background: #435a6b;
width:100%;
height:100px;
text-align:center;
color:white;
font-family:Cambria;
position:fixed;
bottom:0;
}
#reg_msg {
margin:0 auto;
display:block;
width:500px;
height:100px;
padding:12px;
border:2px solid black;
border-radius:20px;
font-family:Verdana;
background-color: #EFF5FB;
box-shadow: 3px 3px 10px #888888;
}
#main_container {
width:auto;
height:auto;
z-index:1;
font-size:14px;
display: block;
}
PHP 代码是这样的:
{include file="header.tpl"}
<div id="main_container">
<div id="reg_msg">
{$MSG}
</div>
</div>
{include file="footer.tpl"}
这是一个问题，另一个问题是如何强制页脚位于页面末尾？我知道我正在使用 position:fixed;命令，但我找不到正确的方法将其保留在最后，就像在这个论坛上一样!!
最佳答案
这是您的代码的工作版本 <强> DEMO
html,
body { height: 100%; }
body {
display: table;
width: 100%;
}
.page-row {
display: table-row;
height: 1px;
}
.page-row-expanded { height: 100%; }
html, body {
margin: 0;
padding: 0;
}
header {
background: #3fa46a;
}
header h1 {
margin: 10px;
display: block;
text-align: center;
background: #3fa46a;
}
footer {
background: #435a6b;
margin: 10px;
}
footer p{
margin: 10px;
}
#reg_msg_container{
position: absolute;
left: 50%;
}
#reg_msg {
position: relative;
left: -50%;
width:500px;
height:100px;
border:2px solid black;
border-radius:20px;
font-family:Verdana;
background-color: #EFF5FB;
box-shadow: 3px 3px 10px #888888;
padding: 10px;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML5, CSS3 and JavaScript demo</title>
</head>
<body>
<!-- Start your code here -->
<header class="page-row">
<h1>Site Title</h1>
</header>
<main class="page-row page-row-expanded">
<p>Page content goes here.</p>
<div id="reg_msg_container">
<div id="reg_msg">
{$MSG}
</div>
</div>
</main>
<footer class="page-row">
<p>Footer, blah blah blah.</p>
</footer>
<!-- End your code here -->
</body>
</html>
关于css - 将消息集中在 CSS 中的标题下方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25888249/