Menu
I have a simple div wrapper with four spans inside.
<body>
<main>
<div>
<span>One</span>
<span>Two</span>
<span>Three</span>
<span>Four</span>
</div>
</main>
</body>
The div is positioned absolutely so that I can get it to touch the bottom of the screen, and text-align is justify so the spans inside are evenly spaced. This works fine until I try to make my spans height: 100%, then a mysterious white space appears outside of the actual flow on the very bottom. I think this has something to do with my div:after psudo-element but I have absolutely no idea what's going on.
* {
padding: 0;
margin: 0;
}
main {
position: relative;
height: 100vh;
width: 100%;
background-color: rgb(45, 45, 65);
text-align: center;
}
div {
position: absolute;
top: 50%;
left: 25%;
right: 25%;
bottom: 0;
text-align: justify;
display: block;
}
div:after {
display: inline-block;
width: 100%;
content: '';
}
span {
background-color: rgb(25, 25, 45);
box-sizing: border-box;
display: inline-block;
font-size: 1em;
padding: 10px;
height: 100%;
}
span:hover {
background-color: white;
}
Do I not understand how :after works, or is this some kind of a glitch? Where in the world is that white spacing coming from on the bottom?
Here's a reproduction of the problem: http://codepen.io/anon/pen/qdpERR?editors=110
353
simply add an overflow: hidden; to the main or even the parent of the main should works.
Check the link http://codepen.io/TibicenasDesign/pen/yNpyLr?editors=110
Uncomment overflow: hidden; or box-sizing: border-box then, the white space at the end of the web will be removed.
Also the box-sizing works ! i always have it with border-box so forgot it haha, and maybe its a better solution
53
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
