I have some really simple html/css that uses 100vh on a body tag, and 100% (or 100vh, I've tried both) on two inline block span's, each span of which has a width of 50vw. I expect to see both spans side by side, each taking up half the screen, and each as tall as the screen - no scrollbars, no white space. Body also has a margin of 0 to help with this. What I see is what I expected except that there is a small vertical scroll bar. I also removed all whitespace from inside the body, as I know this can add space beyond the 100% width. But I can't figure out why I get the scrollbar... I know I can just add an overflow: hidden to body and the scrollbar goes away, but again - why the scrollbar in the first place?
Here is the html file:
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span></body>
</html>
Unfortunately that's the nature of inline elements. You need to add vertical-align:top to force no line height and other font related spacing.
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: top;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
That's because of the inline element white space margin.
Here I used the margin-bottom: -4px; hack (and there is many more) to remove it. Do note though, when using this hack you need to check it against the current font size and adjust it accordingly.
If you really need inline-block, use the vertical-align hack
A better way is to either use flex or float (to support older browsers).
Here is margin-bottom: -4px;
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
margin-bottom: -4px;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
Here is flex
body {
height: 100vh;
margin: 0;
display: flex;
}
span {
height: 100%;
width: 50%;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
Here is float
body {
height: 100vh;
margin: 0;
}
span {
height: 100%;
width: 50%;
float: left;
}
#left {
background-color: red;
}
#right {
background-color: green;
}
<span id="left"></span><span id="right"></span>
You can avoid the white space under the span elements by adding vertical-align: middle; to them: I learned that today and it's very simple 🙂
<!DOCTYPE html>
<html>
<head>
<title>Insert title here</title>
<style>
html {
height: 100vh;
}
body {
height: 100vh;
margin: 0;
padding: 0;
}
span {
height: 100%;
width: 50%;
display: inline-block;
vertical-align: middle; /* here */
}
#left {
background-color: red;
}
#right {
background-color: green;
}
</style>
</head>
<body><span id="left"></span><span id="right"></span>
</body>
</html>
Add this style for "body".
body
{
box-sizing: border-box;
}
I didn't have to make any other changes to the original CSS.
https://www.w3schools.com/css/css_rwd_grid.asp
Related
I have 3 boxes inside a container and I'm trying to have the same height for each box but the height 100vh or height : 100% one doesn't work correctly. Do you have any idea why? I tried on a different browser and OS and I still have the same result. The Green box doesn't reach the height desired.
/* ALL SETTINGS */
* {
margin: 0;
padding: 0;
-webkit-box-sizing: var(--size-box);
-moz-box-sizing: var(--size-box);
box-sizing: var(--size-box);
}
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
max-width: 100%;
height: 100vh;
}
.wrapper .box {
width: 100%;
height: 100vh;
}
.box:nth-child(1){
background-color: blue
}
.box:nth-child(2){
background-color: green
}
.box:nth-child(3){
background-color: red
}
<html>
<body>
<div class="wrapper">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
</body>
</html>
What about this one? Adding 33% width to boxes and making them inline-block aligns them horizontally. I removed the rule * because it is too aggressive. Using too aggressive rules without clear intention seems bad practice.
html,
body {
margin: 0;
height: 100%;
}
.wrapper {
max-width: 100%;
height: 100vh;
padding: 0;
}
.wrapper .box {
width: 33%;
height: 100vh;
display: inline-block;
margin: 0;
}
.box:nth-child(1){
background-color: blue
}
.box:nth-child(2){
background-color: green
}
.box:nth-child(3){
background-color: red
}
divs width sum should be 100vw.
Instead they wrap one below the other because of the 100vh scroll bar.
If I remove the 2nd div (main), the scroll bar disappears.
So is it the width or the height that creates the problem after all?
See code here:
https://jsfiddle.net/arsb3ug6
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
html, body {
min-height: 100vh;
}
nav {
background-color: blue;
float: left;
width: 20vw;
height: 100vh;
min-height: 100vh;
}
main {
background-color: yellow;
display: inline-block;
width: 80vw;
height: 100vh;
}
<nav></nav>
<main></main>
I suggest to use percentage values and make both items float: left and display: block to avoid the whitespace which is generated when using inline-blocks
html, body {
margin:0;
padding:0;
min-height: 100vh;
}
* {
box-sizing:border-box;
margin:0;
padding:0;
border:0;
}
nav {
background-color: blue;
display:block;
float: left;
width: 20%;
height: 100vh;
min-height:100vh;
}
main {
background-color: yellow;
display:block;
float: left;
width: 80%;
height: 100vh;
}
<nav></nav>
<main>
</main>
https://jsfiddle.net/xu9b9o2n/1/
The even easier way would be to make the container (body in this case) a flex container (dsplay: flex), but that depends on how much you have to consider compatibility to old browsers:
html,
body {
margin: 0;
padding: 0;
min-height: 100vh;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
}
body {
display: flex;
}
nav {
background-color: blue;
width: 20%;
height: 100vh;
min-height: 100vh;
}
main {
background-color: yellow;
width: 80%;
height: 100vh;
}
<nav></nav>
<main>
</main>
You should either use float approach or inline-block approach, not mix them, this would be the float approach..
https://jsfiddle.net/RACCH/my0ee61r/
nav {
background-color: blue;
float:left;
width: 20vw;
height: 100vh;
}
main {
background-color: yellow;
float:left;
width: 80vw;
height: 100vh;
}
if you use display inline-block approach consider the gap problem..
If you use vw units will not take into account the scroll bar width that is why your second element will go to a new line, to avoid this use % percentage units..
You can work with the positions of the divs using "position: absolute, relative, sticky, fixed ..."
https://www.w3schools.com/css/css_positioning.asp
html, body {
margin:0;
padding:0;
min-height: 100vh;
}
* {
box-sizing:border-box;
margin:0;
padding:0;
border:0;
}
nav {
background-color: blue;
float:left;
width: 20vw;
height: 100vh;
min-height:100vh;
}
main {
background-color: yellow;
display:inline-block;
width: 80vw;
height: 100vh;
/*just add (position: absolute)*/
position: absolute;
}
<html>
<head></head>
<body>
<nav></nav>
<main></main>
</body>
</html>
I need to have the wrapper div element to be full height and so adjust its height depending on the whole height of the page so no scrollbars are displayed.
My html:
<header>
I am the header and my height is fixed to 40px.
</header>
<div id="wrapper">
I am the wrapper
</div>
My css:
html,body {
height: 100%;
background: blue;
margin: 0;
padding: 0;
}
header {
height: 40px; <-------- this value is fixed
background-color: green;
}
#wrapper {
height: 90%;
background-color: red;
}
I know the height: 90% on the wrapper is wrong but I don't know what to do.
Here is the jsFiddle: https://jsfiddle.net/3putthcv/1/
You can use CSS calc():
#wrapper {
height: calc(100% - 40px); /* 40px is the header value */
background-color: red;
}
JSFiddle
Or display:table/table-row:
html,
body {
height: 100%;
width: 100%;
background: blue;
margin: 0;
padding: 0;
}
body {
display: table;
width: 100%;
}
header {
display: table-row;
height: 40px;
background-color: green;
}
#wrapper {
display: table-row;
height: 100%;
background-color: red;
}
<header>I am the header and my height is fixed to 40px.</header>
<div id="wrapper">I am the wrapper</div>
JSFiddle
What about setting the size based on the top, left, right and bottom like this (demo) (full disclosure, it won't work if the content is too large):
#wrapper {
background-color: red;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 40px;
}
I'm now trying another strange and not working thing: the vertical auto alignment of a child div.
I would like the content to be vertically centered within the panel, because the panel have a height in % that fits the window size, it's really important for me to have a strict alignment.
All right, here's my code: JSFiddle
HTML
<div id="panel">
<div id="content">
</div>
</div>
CSS
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: auto;
background-color: rgba(255,255,255,0.3);
}
#content
{
height: 100px;
width: auto;
background-color: rgba(117,169,56,0.9);
}
Why a so simple thing doesn't work?
Hope someone could help me, I've tried these solutions: margin : auto not working vertically? but it actually didn't make the trick
Here is a simple Solution for vertical aligning, using Pure CSS without fixing any top-margin, top-padding. so its totally responcive.
See this Working Fiddle
HTML: (Same)
<div id="panel">
<div id="content">
</div>
</div>
CSS:
html, body
{
height: 100%;
background-color: #273034;
margin: 0;
}
#panel
{
height: 100%;
width: 380px;
margin: 0 auto;
background-color: rgba(255,255,255,0.3);
}
/*this is new*/
#panel:before
{
content: '';
height: 100%;
margin-left: -5px;
vertical-align: middle;
display: inline-block;
}
#content
{
vertical-align: middle; /*this is new*/
display: inline-block; /*this is new*/
height: 100px;
width: 100%; /*this is new*/
background-color: rgba(117,169,56,0.9);
}
My HTML has 2 divs inside an outer div:
<div class="outer">
<div class="col-left">
<p>Lorem Ipsum is simply dummy text of the...
</div>
<div class="col-right">Right</div>
<div class="clear"></div>
</div>
The CSS is:
.outer {
border: 1px solid black;
}
.col-left {
float: left;
background: cyan;
width: 80%
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
The height: 100% takes effect only if I set a px height on the .outer class, however, I have a situation in which the height should not be fixed.
How can I use height 100% without specifying in its parent a fixed height?
I'm going to use what Layne wrote in the comments.
This CAN be done, but it's tricky. You need to let html and body know their height before you can tell things inside of them to be 100 height etc. --- So, if html doesn't have a height, than how will body know what to be 100% of? and on down the line. It's a slippery slope that I slide down every other day.
html, body {
height: 100%;
}
.outer {
border: 1px solid black;
/* I use this instead of the micro clear-fix in this case - look that up */
overflow: hidden;
height: 100%;
}
.col-left {
float: left;
background: cyan;
width: 80%;
min-height: 100%;
}
.col-right {
float: left;
width: 20%;
background: yellow;
height: 100%;
}
http://jsfiddle.net/sheriffderek/fdxGZ/
This is also an issue with "sticky" footers and stuff:
Always a battle http://codepen.io/sheriffderek/pen/ziGbE
I hope that helps!
if you tell the tag's parent tags (including html and body tags) to also be 100% height that should fix your issue. I added max-height as an option, I did not know if you wanted the container to run the length of the whole screen.
http://jsfiddle.net/brandonbabb/SL3FC/
html, body {
height:100%
}
.outer {
border: 1px solid black;
height: 100%;
max-height: 500px
}
.col-left {
float: left;
background: cyan;
width: 80%;
height: 100%;
}
.col-right {
float: left;
width: 15%;
background: yellow;
height: 100%;
}
.clear {
clear: both;
}
use jquery
$(document).ready(function(){
var outerheight = $('.outer').height();
$('.col-right').height(outerheight);
});