如何让一个div在两个div之间伸展高度，并将其内容居中 [英] How to make a div stretch its height between two other divs and center its content
问题描述
我想创建一个具有3个部分的列布局
第1部分：标题
第2部分：内容部分，从头部扩展到页脚的开始，它的内容在垂直和水平中心位于itsel
第3部分：页脚始终驻留在浏览器窗口的底部。
问题：
我无法将内容div转移到页脚/底部div的开头。如果我输入高度：100％，它会自动延伸到整个页面的结尾。
也想将这个中间div的内容垂直和水平居中 - 尽管我还没有试图这样做。
也不明白为什么标题文本的背景不是彩色的。即使subsader 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 {
最小高度：100％;
height：auto;
身高：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;
明确：两者;
宽度：100％;
高度自动;
背景颜色：＃e8e7e7;
}
.bottom {
background-color：red;
职位：absolut;
身高：1em;
font-size：small;
}
.bottom-left {
float：left;
字体：sans-serif;
left：20px;
}
.bottom-right {
float：right;
right：15px;
font-style：italic;
颜色：＃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>内容纵向和横向居中于DIV内< / div>
< div class =push>< / div>
< / div>
< div class =bottom>
< div class =bottom-left>
< span class =about>
< span class =bold> XYZ< / span>是XZY的一个项目。& nbsp;& nbsp;&＃124;& nbsp;
< span =地址>网站信息< / span> &安培; MDASH; < a href =mailto：info@info.eu> info@info.com< / a>& nbsp;& nbsp;& nbsp;& nbsp;& nbsp;& amp ; NBSP;&安培; NBSP;&安培; NBSP;
< / span>
< / div>
< div class =bottom-right>
< span class =openinghours>透过预约开启< / span>< span class =>& nbsp;& nbsp;& nbsp;& nbsp;由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;保证金：0; } header {background：#faa; } article {background：#afa; } footer {background：#aaf; } .page {display：flex; flex-direction：列;身高：100vh; width：100vw;} article {flex：1;显示：flex; justify-content：center; align-items：center;}
< div class = 页 > <标题>标题内容< /标题> <文章>主要内容< /文章> < footer> footer content< / footer>< / div>
hr>
无需使用表格！一些简单的CSS将很好地做。
DEMO： http://jsbin.com / azivip / 2 / edit
Html标记：
<身体GT;
< div id =content>
< div id =header>
这是标题
< / div>
< div id =inner>
这是body
< / div>
< div id =footer>
这是页脚
< / div>
< / div>
< / body>
CSS：
body {
height：100％;
padding：0px;
margin：0px;
}
#content {
position：relative;
bottom：0px;
宽度：100％;
身高：100％;
}
#header {
position：relative;
bottom：0px;
宽度：100％;
height：100px; / *编辑标题的高度* /
背景：＃f00;
}
#inner {
width：100％;
text-align：center;
位置：绝对;
top：50％;
display：table-cell;
vertical-align：middle;
}
#footer {
position：absolute;
bottom：0px;
宽度：100％;
height：100px; / *编辑页脚高度* /
背景：＃0f0;
为了 #inner 仍然保持垂直居中，您需要使用Javascript / jQuery。下面是一个示例脚本，它拉动 #inner 恰好以居中为准。
var mrgntop = -Math.floor（$（＃inner）。height（）/ 2）;
$（＃inner）。css（{margin-top：mrgntop}）;
I want to make a one Column Layout with 3 section
Section 1: Header Section 2: A Content Section that stretchs from beneth the header to the beginning of the footer, which has it's content centered vertically and horizontally within itsel Section 3: Footer that always resides at the bottom of the browser window.
The Problem:
I can't get the content div to strech to the beginning of the footer/bottom div. If I enter height:100% it automatically stretches till the end of the whole page.
Also would like to center the content inside this middle div vertically and horizontally - though I have not yet attempted to do so.
Also don't understand why the background of the header text is not in color. even though the subheader divs are encapsulated by the header div which has background-color defined.
thanks!
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:info@info.eu">info@info.com</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 update
use flexbox or css grid. Here is a flexbox example. Css grid could be even simpler, but support is pretty low still:
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>
No need to use tables! Some simple css will do nicely.
DEMO: http://jsbin.com/azivip/2/edit
Html Markup:
<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;
}
In order for #inner to stay centered vertically even with multi-line content, you'll need to use Javascript/jQuery. Below is an example script that "pulls up" #inner just the right amount to be centered.
var mrgntop = -Math.floor($("#inner").height() / 2);
$("#inner").css({"margin-top":mrgntop});
这篇关于如何让一个div在两个div之间伸展高度，并将其内容居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
