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
Related
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
So I made a contact page and I want the footer div to be sticking to the bottom of the page not right after the contact form.
But if I put everything to a container div with height:100%; and make footer bottom:0; then the page will be "too long", you have to scroll, etc...
My css so far:
#footer{
background-color:#fff;
font:bold 14px;
color:#1E88E5;
width:100%;
height:auto;
padding:1%;
border-top:1px solid #1E88E5;
}
Footer is just a normal full width div with some centered text atm.
You can probably use position: fixed to achieve this.
.footer {
position: fixed;
bottom: 0;
}
With this you will need to offset the bottom of the page so would suggest adding a padding-bottom to .main that is the height of the footer.
.main {
padding-bottom: 30px /*whatever the height of your footer is*/
}
Pritesh Gupta's solution works really well for me:
I'm copy+pasting the code in case their site goes down:
Here's the HTML:
<!DOCTYPE html>
<html>
<head>
<title>Sticky Footer</title>
</head>
<body>
<main>stuff</main>
<footer>© 2016</footer>
</body>
</html>
Here's the CSS:
body {
margin: 0;
}
main {
min-height: calc(100vh - 4rem);
}
footer {
height: 4rem;
}
I don't know if it works in old browsers but I'm not so worried about that myself.
It also depends on you knowing the height of your footer, although it's worth pointing out that you don't necessarily have to set the height manually like in the code above since you can always figure out what it is if you know how much vertical padding and line-height the contents have...
Hope this helps, I spent most of the morning trying every single sticky footer tutorial on the web before stumbling across this technique and whilst other techniques do work this one requires minimal effort.
If you need sticky footer you can make it with 2 solutions.
Solution 1:
HTML:
<div class="wrap">
Content
</div>
<div class="footer">
Sticky Footer
</div>
CSS:
body, html, .wrap{
height:100%;
}
body > .wrap{
height:auto;
min-height:100%;
}
.wrap:after {
content: "";
display: block;
height: 100px;
}
.footer{
background:#662e8c;
margin-top:-100px;
height:100px;
color:#fff;
position:relative;
line-height:180%;
padding:0 10px;
}
Example: https://jsfiddle.net/ta1amejn/
Solution 2 (With table properties):
HTML:
Content
Footer
CSS:
body{
display:table;
width: 100%;
}
html, body{
height:100%;
}
.main{
height:100%;
width:100%;
padding-bottom:20px;
background:#eee;
display:table-row;
}
.footer{
/*height:30px;*/
line-height:30px;
width:100%;
background:#00f0ad;
display:table-row;
}
Example: https://jsfiddle.net/zbtaoq1b/
If you want a fixed footer use this solution:
.footer{
position: fixed;
bottom: 0;
}
You can do that easily with the display: flex.
You don't care about height body or wrapper tag.
Example: Please change the height of main tag any value if you want, footer always sticky to bottom(not position: fixed).
https://codepen.io/tronghiep92/pen/dzwRrO
HTML markup
<div id="wrapper">
<header>my header</header>
<main>main content, please change height</main>
<footer>
my footer
</footer>
</div>
CSS Solution
#wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
margin-top: auto; /* this is the solution */
}
main {
height: 100px
}
Or you can:
#wrapper {
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100vh;
}
header {
height: 100px;
background: yellow;
}
footer {
height: 50px;
background: red;
}
main {
flex: 1;
height: 100px;
}
This is basically what I want to achieve:
I want the total page to be 100% height, but when I put the sidebar and body at 100%, the page adds the 40px from the navbar, so I get a scrollbar even when there shouldn't be one.
I got it fixed by using tables, but I'm sure there must be an easier way
<body>
<div class="container-fluid">
<div class="navbar"></div>
<div class="sidebar"></div>
<div class="body"></div>
</div>
</body>
and css what I've got so far:
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
.navbar {
height: 40px;
position: relative;
}
You'll have to subtract the height of the navbar from the 100%. There are several solutions, many of which will include JavaScript but you won't need that.
1: box-sizing
Give the navbar an absolute position. Then you have the issue of the content of the other elements disappearing below it.
Then comes the next trick: add a top-padding the size of the navbar.
And the last trick: add box-sizing: border-box; to the .sidebar and .body. For better browser support you also need -moz- and -webkit- prefixes like so: -moz-box-sizing:
Example: Fiddle to box-sizing
2: Actually subtract.
use .body, .sidebar{ height: calc(100% - 40px);
Browser support is very minimal for this from what I know less than for box-sizing, so I would recommend the first solution.
Calc explained on css-tricks
3: Flexbox(added anno 2015)
You should now probably go with using calc when you know the height but an awesome replacement for using tables is flexbox. This is really my saviour for complex designs in responsive websites. By using one of the best features - flex-shrink: 0 - on the header you can force other elements into adjusting themselves to fill the rest of the container.
An old answer is probably not the best place to write down an extensive guide on flexbox so, again, a great link to css-tricks
Probably because it is adding the default margin from the navbar. Try this:
.navbar {
height: 40px;
position: relative;
margin: 0;
padding: 0;
}
Also, try changing the min to max height:
max-height: 100% !important;
I change a litle your code by adding a container around your side bar and body class:
Here is the RESULT
Css:
body, html, .container-fluid, .sidebar, .body {
height: 100%;
min-height: 100%;
}
#container{
width:100%;
height:100%;
}
.sidebar{
background-color: green;
width:10%;
float:left;
height:100%;
}
.body{
background-color: orange;
float:left;
width:90%;
height:100%;
}
.navbar {
height: 40px;
position: relative;
background-color: yellow;
width:100%;
}
HTML
<div class="container-fluid">
<div class="navbar">
navbar
</div>
<div id="container">
<div class="sidebar">
sidebar
</div>
<div class="body">
body
</div>
</div>
</div>
</body>
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 have five section:
<section id="one">Page 1</section>
<section id="two">Page 2</section>
<section id="three">Page 3</section>
<section id="four">Page 4</section>
<section id="five">Page 5</section>
And I want to make each of them fullscreen of current screen (i have screen 1920/1080 other has 1024/768 etc)
I have css code like this:
section {
display: block;
background: #CFF;
height:2000px;
padding: 60px;
padding-left: 120px;
}
when I'm chanching height from 2000px to 100% result is that:
any idea how can i solve this problem?
JSFIDDLE
EDIT
I've found nice article about that. see here if anyone will need it
You need to implicitly set the dimensions of the document (body) to those of the viewport (html), then give a height and width of 100% to each section- which is then calculated relative to this.
Change your CSS for body and section to:
Demo Fiddle
html, body {
margin: 0;
height:100%;
width:100%;
padding:0;
}
section {
display: block;
background: #CFF;
height:100%;
width:100%;
padding: 60px;
padding-left: 120px;
box-sizing:border-box;
}
By adding box-sizing:border-box; to the CSS for section, each section will maintain 100% width inclusive of the applied padding.
Note
You can also viewport percentage units, namely use vh and vw (viewport height) and (viewport width) units to cause content to stretch to fill a proportionate amount of the viewport, where 100 = 100%. This is likely the preferred solution vs implicit % units, depending on your required browser support and does not require the element to be nested within a parent with explicit height/width settings
Just use:
section {
height:100vh;
width: 100vw;
}
No need to set height and width properties for <body> and <html> tags.
Set the height on the body and html elements to 100%, then use height:100% on the sections.
html, body {
height:100%;
}
jsFiddle example
You need to set the document's height to the size of the browser viewport before you can give it's children a height in percents:
body, html {
margin: 0;
height:100%
}
Then, just give the sections a height of 100%:
section {
display: block;
background: #CFF;
height:100%;
padding: 60px;
padding-left: 120px;
}
JSFiddle Demo
That isn't too hard to do.
What you need to do is give the body and the html a height as well. I changed the following CSS:
html {
height: 100%;
position: relative;
}
body {
margin: 0;
height: 100%;
position: relative;
}
section {
display: block;
background: #CFF;
height:100%;
padding: 60px;
padding-left: 120px;
}
You can see how it works in the following jsfiddle