我想使一个列布局与3部分如何使一个div拉伸其高度的其他两个div之间和中心的内容
第1节:抬头 第2部分:从beneth所述stretchs内容区段页眉到页脚的开头,它的内容在垂直和水平方向居中居中itsel 第3部分:页脚始终驻留在浏览器窗口的底部。
问题:
我不能获取内容的div STRETCH时到页脚/ DIV底部的开始。如果我输入高度:100%,它会自动延伸到整个页面的末尾。
也想在这个中间div内垂直和水平居中 - 虽然我还没有试图这样做。
也不明白为什么标题文本的背景不是颜色。即使sub header divs是由定义了背景色的header div封装的。
谢谢!
http://jsbin.com/ixipug/1/edit
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html {
height: 100%;
}
body {
height: 100%;
margin-left: 20px;
margin-top:0px;
margin-bottom: 0px;
}
#containerHeaderContent {
min-height:100%;
height: auto;
height: 100%;
margin: 0 auto -1.5em;
}
.push {
height: 1em;
}
.header {
background-color: aqua;
padding-top:20px;
}
.subheader-left {
float:left;
font-family: serif;
font-size: 20px;
text-align: left;
}
.subheader-right{
float: right;
font-family: sans-serif;
font-size: 12px;
padding-right: 20px;}
.middleSection {
padding-top: 10px;
clear:both;
width:100%;
height auto;
background-color: #e8e7e7;
}
.bottom{
background-color: red;
position: absolut;
height: 1em;
font-size: small;
}
.bottom-left {
float: left;
font: sans-serif;
left: 20px;
}
.bottom-right {
float: right;
right: 15px;
font-style: italic;
color: #8e8e8e;
font-size: 11px;
}
</style>
<title>XYZ</title>
</head>
<body>
<div id="containerHeaderContent">
<div class="header">
<div class="subheader-left">XYZ</div>
<div class="subheader-right">LOREM</div>
</div>
<div class="middleSection">Content Vertical and Horizontally Centered inside DIV</div>
<div class="push"></div>
</div>
<div class="bottom">
<div class="bottom-left">
<span class="about">
<span class="bold">XYZ</span> is a project by XZY. |
<span="address">Website Information</span> — <a href="mailto:[email protected]">[email protected]</a>
</span>
</div>
<div class="bottom-right">
<span class="openinghours">Open by Appointment</span><span class=""> sponsored by XYZ</span>
</div>
</div>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</body>
</html>
我想迈克尔的解决方案是好的,它只需要将页脚更改为固定? – Stano 2012-08-14 22:59:04
它很整洁,我不知道为什么我没有想到这个:)对于一个非“可控”解决方案。 – Chris 2012-08-14 23:04:02
非常好!谢谢!但有一个问题 - 中间部分的多行内容是否可以自动生成。以中心为单位,上方:50%适用于单行文本,但不适用于图片或多行文本。再次感谢! – Roland 2012-08-14 23:15:48