as I stated in the title I'm trying to make a website were you can not scroll down or something, it should cover the whole webpage.
Here is an example,
I tried doing this but whenever I set the height and width to 100% it doesn't seem to work, it always make content inside the wrapper that exceeds 100% overflow.
Edit: also making everything equal to 100% height/width doesn't work since I'm using borders and px.
use
body{
width:100vw;
height:100vh;
overflow:hidden;
}
(don't forget to use a reset sheet first)
If you use px(usage that I don't recommend), you may use the CSS calc() function for sizing things just like this (for instance) width: calc((100vw - 900px) / 2)
EDIT
For everything else :
CSS
div#header/*or simply the HTML header*/{
width:100vw;
height:/*something here that I'll call Hh for calculuses (less than 100vh)*/;
float:left;
}
div.sidebar{
width:/*something i'll call SBw for calculuses (less than 50vw)*/;
height:calc(100vh - Hh - Fh);
}
div#main{
width:calc(100vw - SBw - SBw);
height:calc(100vh - Hh - Fh);
}
div#footer/*or simply the HTML footer*/{
width:100vw;
height:/*something I'll call Fh*/;
}
and HTML
<body>
<div id="header"></div>
<div class="sidebar" id="Sidebar1"></div>
<div id="main"></div>
<div class="sidebar" id="Sidebar2"></div>
<div id="footer"></div>
</body>
I would use the flexbox sticky footer technique. The 100vh makes it always the height of the screen and then flexbox magic takes care of the rest making it always fit no matter what screensize. Check it out:
HTML
<body>
<header></header>
<main class="content">
<section class="left-side"></section>
<section class="right-side"></section>
</main>
<footer></footer>
</body>
CSS
body {
display: flex;
min-height: 100vh;
padding: 0;
margin: 0;
flex-direction: column;
background-color: red;
}
header {
height: 50px;
background-color: green;
}
main.content {
display: flex;
justify-content: space-between;
flex: 1 0 auto;
background-color: yellow;
}
.left-side, .right-side {
display: block;
height: auto;
width: 20%;
background-color: orange;
}
footer {
height: 50px;
background-color: blue;
}
Full codepen example: http://codepen.io/StefanBobrowski/pen/zZXXWy
Related
When a number of rows on the last page is small it leaves space below the table. On a "full" page, there is no space.
Also,
Pics (the html background set to green just for demonstration)
No extra space
I played with min-height/max-height/height. Couldn't get close to what I would like to see.
body {
background: #fafafa;
color: #333333;
margin-top: 5rem;
}
html {
/* min-height: 100%; */
/* min-height: 200px; */
background-color: green;
}
Also been logging height for body and html in my .js.
console.log(`BODY: ${$('body').height()}`);
console.log(`HTML: ${$('html').height()}`);
And there is probably something that I don't understand, because it shows that height of html = height of body - margin-top for every page of the table. I thought html height will be bigger, and then I will be able to set the height via JQuery. Also if I set really small(like 200px) max-height for html it doesn't seem to have any effect, but I definitely can see the difference if I set a big min-height for html, like 1600px or something. Is there some global min-size that couldn't be less than some value?
I don't think the table styling or some Tablesorter options have anything to do with it. Let me know if some additional info will be useful.
EDIT.
demo
example of the desired behavior.
Try this,Its works:
body {
background: #fafafa;
color: #333333;
margin:0;
min-height:100%;
}
html {
background-color: green;
height:100%;
}
Try this implementation of footer:
CSS:
#supports (display: grid) {
body {
display: grid;
grid-template-rows: 3.5rem auto fit-content(8rem);
grid-template-areas: "header"
"main"
"footer";
padding-top: 0;
height: 100%;
}
}
main {
grid-area: main;
}
.main-footer {
background: black;
padding: 2rem;
grid-area: footer;
}
.main-header {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
background-color: lightgreen;
}
HTML:
<body>
<header>
<div class="main-header">
This is a header!
</div>
</header>
<main>
<div class="main">
This is a main!
</div>
</main>
<footer class="main-footer">
<nav>
<span>This is a your footer!</span>
</nav>
</footer>
</body>
I am using display: table property to achieve sticky footer with the following features:
Header and footer heights are not fixed
Content is always 100% of the remaining height
Here is a fiddle of what I currently have: JSFiddle
Everything works perfectly, but what I am trying to achieve is a footer that is not visible on the screen, unless the user scrolls. The footer should be right below the window if there is not enough content, otherwise the content should push it. Here is a picture that explains what I actually mean. In the left is what I currently have, in the right what I am trying to achieve.
You could use flexboxes, along with view height for that !
.container {
display: flex;
flex-direction: column;
justify-content: start;
align-items: stretch;
height: 100vh;
}
.header {
flex: 0 0 50px;
background: lightblue;
}
.content {
flex: 1 1 auto;
background: lightgrey;
}
.footer {
height: 100px;
background: darkcyan;
}
<div class="container">
<div class="header"></div>
<div class="content"></div>
</div>
<div class="footer"></div>
#trichetriche's answer is better than mine (I really need to get to grips with flexbox!), but I updated your fiddle with a little bit of jQuery. This could be distilled down more but you can see what's going on as it is.
All it does is get the header height and content height, and if they're smaller than the window height then it sets the content height accordingly.
Fiddle
$(document).ready(function() {
var h = $('#header').height();
var c = $('#content').height();
var w = $(window).height();
if((h + c) < w) {
$('#content').height(w - h);
}
});
I ended up using just the same code, but instead of having all elements in the container I left the footer outside. Seems to work just right. Here is an updated fiddle: JSFiddle
* {
margin: 0;
padding: 0;
}
body, html{
width: 100%;
height: 100%;
}
.container{
width: inherit;
height: inherit;
display: table;
background: red;
}
.container div {
width: inherit;
}
.header {
background: darkgray;
}
.content {
height: 100%;
background: green;
}
.footer {
background: yellow;
}
<div class="container">
<div class="header">
<h1>HEADER</h1>
</div>
<div class="content">
<h1>CONTENT</h1><h1>CONTENT</h1><h1>CONTENT</h1>
</div>
</div>
<div class="footer">
<h1>FOOTER</h1>
</div>
Can anybody help me with the illustration mentioned below?
<body>
<header height="100px"></header>
<main height="rest of the height of viewport"></main>
</body>
I want <header> of certain predefined height but want that rest of the height of viewport will be grabbed by <main>.
NOTE: No JavaScript code please.
CSS
header {
height: 100px;
}
main {
height: calc(100vh - 100px);
}
What happen here is, VH is your viewport height. So, we should subtract it into header height.
Working Fiddle: https://jsfiddle.net/y10p9atj/
Hope it helps.
Try This Its Automatically Adjusts Any Resolution With 100PX minus Of Its Height
https://jsfiddle.net/samudrala/frw31kbh/
body {
margin: 0;
padding: 0;
height:100vh;
}
header {
height: 100px;
width: 100%;
background: #ff8800;
}
main {
height: calc(100% - 100px);
height:-webkit- calc(100% - 100px);
height:-moz-calc(100% - 100px);
width: 100%;
background: green;
}
<body>
<header></header>
<main></main>
</body>
This is also possible using flex box in css. But this will not support older browser like IE9 >.
<div class="flex">
<header class="header"></header>
<main class="flxGrow main"></main>
</div>
.flex{
display:flex;
flex-flow:column wrap;
height:100%
}
.flxGrow{
flex-grow:1;
}
.header{
padding:20px;
background:red;
}
.main{
background:blue
}
body,html{
height:100%;
margin:0
}
Main advantage of using flexbox over vh(vertical height), No need of calculating manual heights of header. This solution will be flexible with any dynamic header heights. Also refer the fiddle here
I have a code
<html>
<head></head>
<body>
<div id="main"> Hello world.!</div>
</body>
</html>
and CSS
body{
background-color: black;
}
#main{
padding: 10px;
background-color: blue;
}
please help me out to have a background with 100% height. looking for jsfiddle link.
.center-element {
min-height: 100%;
min-height: 50vh;
display: flex;
align-items: center;
justify-content: center;
-ms-flex-direction: column;
flex-direction: column;
}
as i have understood if you want to set the height of blue div then add this
body {
background-color: black;
}
body,
html {
height: 100%;
}
#main {
min-height: 100%; /** set height 100% if content is smaller **/
height: auto; /** if the content is larger than **/
}
#main {
padding: 10px;
background-color: blue;
}
<div id="main">Hello world.!
</div>
In CSS3 you can use vh wich stands for viewport height. i.e. 100 vh means 100% of viewport height.
height: 100vh;
I would definitely recommend you to look at this post: Make div 100% height of browser window
Here it is explained not just how to do it, but also the difference between 100% and 100vh.
Really good for extra knowledge :-)
I found several questions about but none of their solutions was working for me so here we go again.
Let's say I have this template of HTML
<html>
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</html>
The footer div should be at least 80px height, but if those 80px plus the height of all other 3 divs is not enough to fullfill the screen I want the footer to increase as much as the screen is filled with it below header, contentA and contentB.
BG-Color Solution
If you just want to let the remaining space have the same background-color as the footer (but not the body), you could add the footer bg-color to the html-tag:
html {
background-color: #footer_color;
}
body {
background-color: #body_color;
}
#footer {
min-height: 80px;
}
.
JS-Solution
If you have something more complex within your footer, you could use javascript/jquery to calculate the remaining space and set the footer to that height.
There is a similar question with a code example here: https://stackoverflow.com/a/14329340/3589841
.
Flexbox-Solution
If you only care about the latest browsers you can use the flexbox-box-model:
HTML:
<html>
<body>
<div id="flex_container">
<div id="header">...</div>
<div id="contentA">...</div>
<div id="contentB">...</div>
<div id="footer">...</div>
</div>
</body>
</html>
CSS:
html, body {
min-height: 100%;
}
#flex_container {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: flex-start;
}
#header {
flex: 0 1 auto;
}
#contentA {
flex: 0 1 auto;
}
#contentB {
flex: 0 1 auto;
}
#footer {
flex: 0 1 100%;
min-height: 80px;
}
I believe you're going for something like this, have a look http://jsfiddle.net/dusUK/
Using CSS, we create a class, which in this case is fullheight, and we apply the following:
.fullheight {
display: block;
position: relative;
background: red;
height: 100%;
}
We also then apply the following to html, body
html, body {
height: 100%;
min-height: 100%;
}