Menu
I would like to center the Dasboard h1 in the attached markup. It is not possible for me to know the size of the div or is it possible for me to set height: 100% for every preceding div for this.
I would have thought this was possible with flexbox but every example I see has height 100% or height: 100vh in all the parent elements. I could just use display: table or dispaly: table-cell if that was the case.
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>
414
Syntax: To set a div element height to 100% of the browser window, it can simply use the following property of CSS: height:100vh; Example: HTML.
Syntax: height: length|percentage|auto|initial|inherit; Property Values: height: auto; It is used to set height property to its default value.
container div has two parent elements: the <body> and the <html> element. And we all know that the default value of the height property is auto , so if we also set the height of <body> and <html> elements to 100%, the resulting height of the container div becomes equal the 100% height of the browser window.
If height: auto; the element will automatically adjust its height to allow its content to be displayed correctly. If height is set to a numeric value (like pixels, (r)em, percentages) then if the content does not fit within the specified height, it will overflow.
If I am right, you are trying to achieve something like this.
<header id="header" height="120px"></header>
<div id="content" height="fill the rest of the height"></div>
<footer id="footer" height="120px"></footer>
In this case you will need to use CSS flex. Flex works fine horizontally without any fix, because by default any Block level element has width=100% i.e fills the whole available width of the parent. But it does not have a default height. The height of a block element is calculated as a total of all it's children's height. A div's default height is it's content's height. Even the <html>,<body> tags does not span the whole height of the window, it spans the height of it's contents.
So to make flex work vertically and divide your screen into header,footer and auto-adjusting content, you need to set height starting from the top, set <html>,<body> and #root to 100%
html, body, #root {
height: 100%;
margin: 0;
paddding: 0;
}
Now your #root div is occupying the whole screen height, so you can set your header,footer and contents height using flex.
#root {
display: flex;
flex-direction: column;
}
header {
height: 120px;
}
#content {
flex: 1;
overflow-y: auto; /* scrollbar for content */
}
footer {
height: 120px;
}
This same work of flex can be done by javascript
We run a javascript code that runs when the page is loaded, calculates the screen height and assign the perfect height for the content div, that solves it nice and neat.
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';
}
And for centering the
<h1>header, just use text-align property, it's enough.
h1 {
text-align: center;
}
You don't need to set vertical-align to middle unless your <h1> tag has a height specified.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
