Fullscreen height and width

Question

I am trying to get my site background splitted in two colars verticalle. Fullscreen both height and width. What I am doing wrong here ? Hope someone can help. regards

I have a link to the test page here

HTML:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing fullscreen</title>
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<div id="wrapper">
<table id="maintable" border="0" cellspacing="0" cellpadding="0">
<tr>

<td id="table1">How to get this fullscreen height?</td>

<td id="table2">
<div id="logomelonmania">
</div>

<table id="menu-div" >
<tr>

</tr> 
</table>

<div id="paragraphtext"></div>
</td>
</tr>
</table>
</div>
</body>
</html>

CSS:

@charset "utf-8";
/* CSS Document */

body {
margin:0px;
}


tablepage {
border-spacing: 0;
border-collapse: collapse;
}

#table1 {
background-color: #88b56d;
width:50%;
height:100%;
}

#table2 {
background-color: #435;
height:100%;
width:50%;
}

#wrapper {
height:100%;
}

#maintable {
height:100%;
width:100%;
}

Is there a reason you are using tables? The element is there to show tabular data, not to layout pages (like we did 10years ago). — Hoshts, Oct 24 '15 at 13:07
That would be a lot more semantic if used together with html5 elements like header, footer, main, article, section and so on. — Hoshts, Oct 24 '15 at 13:11
We all were at some point. Asking questions is one of the best ways to learn. — Hoshts, Oct 24 '15 at 13:14
If you want an easy to follow tour of html5 and css3, Microsoft have a good produced series http://www.microsoftvirtualacademy.com/training-courses/html5-css3-fundamentals-development-for-absolute-beginners — Hoshts, Oct 24 '15 at 13:19
I am changing eveything to divs now. Seems more logical as you say! — Thomas, Oct 24 '15 at 13:28

score 1 · Answer 1 · edited May 23 '17 at 11:58

If you look at the css that is actually on the test page, #wrapper is set to 100px instead of 100% I have created a plunker that works as you describe.. http://plnkr.co/edit/wwyK3sl41wUDajiSAgnC?p=preview

You may have also have to set the html tag to 100vh I found the 100 vh here... Make body have 100% of the browser height

#wrapper {
margin: 0px 0px 0px 0px;
height:100px;
overflow:hidden;

}

score 0 · Answer 2 · answered Oct 24 '15 at 13:10

I believe this has been answered before, anyway, it is a rather simple structure:

wrapper div > left + right divs

For this to work we must set HTML and body tag to have height:100% and width:100% and the same thing to the wrapper tag. then Right and Left will get 50% width and 100% height

html, body, #wrap {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
    text-align: center;
    color:#FFF;
}

#wrap {
    overflow:auto;
}

#left, #right {
    height: 100%;
    width: 50%;
    float:left;
}

#left {background: green;}

#right {background:purple}

#footer {
    background:black;
    height:50px;
}

<div id="wrap">
    <div id="left">Left Side</div>
    <div id="right">Right Side</div>
</div>

<div id="footer">footer</div>

Ok. Yes it was simple. Could not find it, but thank you for answering ;) — Thomas, Oct 24 '15 at 13:27
You're welcome! If this is what you were looking for please accept it as answer — Aziz, Oct 24 '15 at 14:57

score 0 · Answer 3 · answered Oct 24 '15 at 13:12

Height doesn't works with % just with pixels <img height="pixels"> You can use with porcent in that case <div style="height:200px"> <p style="height:100%; display:block;">Hello, world!</p> </div> Because before we use pixels and 100% shows 200px

Try this div { height:100vh; } The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

Also you can use this but I don't trust at all body, html { height: 100%; }

#right { height: 100%; }

Fullscreen height and width

3 Answers3