我想将Dasboard h1置于附加标记中心.我不可能知道div的大小,或者我可以设置高度:对于每个前面的div为100%.
我本以为这可以用flexbox实现,但我看到的每个例子都有100%的高度或者所有父元素的高度:100vh.我可以使用display:table或dispaly:table-cell如果是这种情况.
html {
min-height: 100%;
position: relative;
}
body {
height: 100%;
background-color: #f7f7f4;
}
#root {
height: 100%;
padding-bottom: 170px;
}
.wrapper {
max-width: 750px;
}
.grid {
list-style: none;
margin: 0;
padding: 0;
margin-left: -30px;
}
.grid__item {
display: inline-block;
padding-left: 30px;
vertical-align: top;
width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.one-half {
width: 50%;
}
.private-banner__container {
height: 98px;
}
.private-banner__layout {
width: 100%;
height: 100%;
display: table;
}
.private-banner__right, .private-banner__left {
display: table-cell;
vertical-align: middle;
}
.footer__footer {
padding-top: 48px;
padding-bottom: 48px;
}
ul {
margin-left: 38px;
margin-left: 2.375em;
}
.footer__footer ul li:not(last-of-type) {
margin-right: 48px;
}
.footer__footer li {
display: inline;
}<html lang="en">
<body>
<div id="root">
<header role="banner">
<div class="wrapper private-banner__container">
<div class="grid private-banner__layout">
<div class="grid__item one-half private-banner__left"><h1>Logo</h1></div>
<div class="grid__item one-half private-banner__right"><a href="/business/dashboard">Home</a><a class="link__default" tabindex="0">Log Out</a></div>
</div>
</div>
</header>
<div>
<div class="wrapper">
<div class="grid">
<div class="grid__item ">
<h1>Dashboard</h1></div>
</div>
</div>
</div>
<footer class="footer__footer">
<div class="wrapper">
<div class="grid">
<div class="grid__item ">
<ul>
<li><a target="_blank" href="/static/about">About</a></li>
<li><a target="_blank" href="/static/accessibility">Accessibility</a></li>
<li><a target="_blank" href="/static/cookies">Cookies</a></li>
<li><a target="_blank" href="/static/privacy">Privacy</a></li>
</ul>
</div>
</div>
</div>
</footer>
</div>
</body>
</html>如果我是对的,你正在努力实现这样的目标.
<header id="header" height="120px"></header>
<div id="content" height="fill the rest of the height"></div>
<footer id="footer" height="120px"></footer>
在这种情况下,您将需要使用CSS flex.Flex的水平正常工作,没有任何修复,因为默认情况下任何块级元素具有width=100%即填充父的整个可用宽度.但它没有默认高度.块元素的高度计算为所有孩子的高度的总和.div的默认高度是它的内容高度.即使是<html>,<body>标签也没有跨越窗口的整个高度,它跨越了它的内容的高度.
因此,为了使弹性工作和垂直划分你的屏幕为页眉,页脚和自动调节的内容,你需要设置高度从顶部开始,设置<html>,<body>并#root以100%
html, body, #root {
height: 100%;
margin: 0;
paddding: 0;
}
现在您的#rootdiv占据整个屏幕高度,因此您可以使用flex设置页眉,页脚和内容高度.
#root {
display: flex;
flex-direction: column;
}
header {
height: 120px;
}
#content {
flex: 1;
overflow-y: auto; /* scrollbar for content */
}
footer {
height: 120px;
}
flex的同样工作可以通过javascript完成
我们运行一个javascript代码,在页面加载时运行,计算屏幕高度并为内容div指定完美的高度,这样可以很好地解决它.
window.onload = function () {
var headerHeight = document.getElementById('header').clientHeight;
var footerHeight = document.getElementById('footer').clientHeight;
var contentheight = screen.availHeight - headerHeight - footerHeight;
document.getElementById('content').style.height = contentheight + 'px';
}
而对于
<h1>标题的居中,只需使用text-align属性,就足够了.
h1 {
text-align: center;
}
vertical-align除非您的<h1>标签指定了高度,否则无需设置为中间.