我想制作一个包含3个部分的列布局 第1节：标题第2节：内容部分,从页眉到页脚的开头延伸,其内容在内容中垂直和水平居中第3部分：页脚始终位于浏览器窗口的底部. 问题： 我无法将内容div拉伸到
... . . 我想制作一个包含3个部分的列布局
第1节：标题
第2节：内容部分,从页眉到页脚的开头延伸,其内容在内容中垂直和水平居中
第3部分：页脚始终位于浏览器窗口的底部.
问题：
我无法将内容div拉伸到页脚/底部div的开头.如果我输入高度：100％它会自动延伸到整页的末尾.
也希望将内容垂直和水平地放在这个中间div内 – 尽管我还没有尝试这样做.
也不明白为什么标题文本的背景不是彩色的.即使子标题div由标题div封装,标题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>.解决方法
. 2018年更新
使用flexbox或css网格.这是一个flexbox示例. Css网格可能更简单,但支持仍然很低：
body,html { padding: 0; margin: 0; }header { background: #faa; }article { background: #afa; }footer { background: #aaf; }.page { display: flex; flex-direction: column; height: 100vh; width: 100vw;}article { flex: 1; display: flex; justify-content: center; align-items: center;} <div class="page"> <header>header content</header> <article>main content</article> <footer>footer content</footer></div>
无需使用表格！一些简单的CSS会做得很好.
演示：http://jsbin.com/azivip/2/edit
Html标记：
<body> <div id="content"> <div id="header"> This is the header </div> <div id="inner"> This is the body </div> <div id="footer"> this is the footer </div> </div></body>
CSS：
body{ height:100%; padding:0px; margin:0px;} #content{ position:relative; bottom:0px; width:100%; height:100%; } #header{ position:relative; bottom:0px; width:100%; height:100px; /* Edit for height of header*/ background:#f00; } #inner{ width:100%; text-align:center; position: absolute; top: 50%; display: table-cell; vertical-align: middle; } #footer{ position:absolute; bottom:0px; width:100%; height:100px; /* Edit for height of footer */ background:#0f0; } 为了使#inner保持垂直居中,即使使用多行内容,您也需要使用Javascript / jQuery.下面是一个示例脚本,它“拉出”#inner恰好适合居中的数量.
var mrgntop = -Math.floor($("#inner").height() / 2);$("#inner").css({"margin-top":mrgntop});. . .. ...
