You know how sometimes when you're low on content, and then footer stands right under the content?
Instead of sticking it to bottom using fixed position, or else,
Why not make everything under footer, be the same color as the footer's background (without changing the body background, if possible).
Also, to use 100% as height, so it's dynamic.
For example:
BEFORE:
http://gyazo.com/801af7d0c1c797900ca00648cc82443e
AFTER:
http://gyazo.com/5cb8503f122107d83a01ddae2c7fbc2a
How do I do so?
Thanks!
Use CSS sticky footer to ensure that the footer sticks to the bottom of the viewport when there is not enough content to fill the page - http://ryanfait.com/sticky-footer/
I usually let the body of the page have the color which you want below the footer. Then let a container (with 100% width) have the actual page color. To avoid "flicker" or a black page (depending on color offcourse) I add this to the container:
#container {
background-color: white; /* Page color */
min-height: 600px;
overflow:auto;
}
You can make the page have the background color of the footer, like:
body { background: blue; }
div.footer { background: blue; }
Then, you want your main content div to have a good color, like white:
div.content { background: white; }
Related
I am wondering how can I something like this with CSS & HTML:
https://www.vatsim.net
You open the page and you get a backrgound that fits all the browser, but then you scroll down and you get a solid color as background and more info.
I tried with this, but is not what I am looking for, I want something like the link on the top,
https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/
Thank you very much!
You can get far by just adding a bit of CSS. In the snippet below, there are two divs. The first one is for the top area with the image. The second one is for the rest of the content.
The first div gets a height of 100vh, making it 100% of the screen height. The background image is centered and set to scale so it covers the entire div. And, well, that's basically all there is to it. No script needed.
* { /* Just get rid of some whitespace */
padding: 0;
margin: 0;
}
div.image {
height: 100vh; /* div is 100% of viewport height */
background-image: url(https://www.ancestry.com/wiki/images/archive/a/a9/20100708215937!Example.jpg);
background-size: cover; /* Entire div is covered by the image */
background-position: center; /* Image is centered relatively to the div. */
}
/* Just some styling to make it visible. */
div {
color: white;
font-size: 150%;
}
div.content {
color: black;
background-color: #eee;
height: 2000px;
}
<div class="image">This is the top area. The image exactly covers the view.</div>
<div class="content">This is the rest of the content. You can scroll down a bit just to see what happens.</div>
The webpage you added is basicly splitted to divs, the first is 100% height and 100% width. therefore you can see him all over your screen.
The others are just divs with 100% width but not 100% height, which gives you the ability to switch the background color from light gray to white and then to gray.
Not too complicated but yet a nice design
I'm having trouble figuring out how to make the menu and footer expand across the screen...as of now they only are body width 960px...
page link: www.kvf.fo/vix
I saw your page.
you have wrapped your footer and main content inside body and you have given body width:960px;.
so the footer taking 100% width of body i.e 960px.
To get the desired result don't wrap footer inside body.
use different div for footer and main content of the page.
And assign the div width:960px; which wrapped main content.
Don't give dody width:960px;
You can just simply set the width to 100% in css, nothing more.
#menu {
width: 100%;
}
#footer {
width: 100%;
}
Also to get rid of the spacing on the left: just do:
body {
margin: 0px;
}
Which gets rid of all the nasty margins.
body style has a
overflow: hidden
You may want to review how you have structured your page
I am having some trouble changing the background color of my webpage, and cannot seem to find a solution.
I have content on the page, but the black background stops when the content stops. I have tried to extend the content, use the body selector, and universal selector...but none of these work.
Is there any: height: 100% property, so that it can can retain the color for all screens?
Apply it to the html tag instead.
html{
background-color: black;
}
Your body content is overflowing the container that has the background color. That's why you see the background color stops but content goes on. To fix the issue ensure that the container contains the content.
I think you are looking for vw,vh,vmax,vmin Units
you can use it on your body tag
body{
padding: 0;
height: 100vh; /*add this to fill the screen*/
background: red /*set the background color here*/
}
I am making a social network, and I'm using linear-gradient(#dadae3, white). This works, however a section at the bottom with the color #dadae3 shows at the bottom. I do not have an element for this section.
Screenshot:
I am looking for a solution to get rid of this gray section. Thanks!
Your background gradient is just repeating there because of lack of height of the body element(I assume you are using gradient on body element), also make sure you have set your background-repeat to no-repeat
Demo
html, body {
height: 100%; /* Setting both the elements height to 100% */
}
body {
background-repeat: no-repeat;
/* mmmm not required as we have set to fixed but than too no harm using it */
background-attachment: fixed; /* Fixes background for you */
background: linear-gradient(#dadae3, white);
}
It might be the background-color for the body or the html element of the page!
And the gradient is just covering the div in your page! Check the css for body or html (or the parent of this element).
You might also want to check the footer CSS properties too!
Try this for a check:
html, body, footer {
background-color: transparent; // remove the background..
}
How can I have div 'lower' fill the lower part of the screen with it's bg image?
Div 'upper' grows depending on the content.
The red line marks the viewport.
Here I have an example how I did it with a table : Splendid
But I want it tableless!!
Warning: This answer does not solve the original problem, I misunderstood his question. What the author wants to achieve is probably impossible with CSS only, because we have a combination of sticky footer, a footer-head that is always visible (like taskbar) and dynamic height of both the main content and the footer.
I'm leaving the snippet for anyone that might look for a sticky footer.
Fiddle: Dynamic Content with Sticky Footer
I used a timer to illustrate filling the 'Upper' Container with content constantly.
Basically you have the following HTML:
<div class="wrapper">
<div class="upper">
<span></span>
<div class="push">
</div>
</div>
<div class="lower">
Footer content goes there.
</div>
</div>
And of course, CSS:
.upper{
min-height: 100%;
height: auto !important;
width: 100%;
height: 100px;
background: blue;
margin: 0 auto -100px; /* The negative value of the footer height. */
color: white;
}
.lower, .push {
height: 100px; /* Footer and Push need to have equal height */
background: red;
color: white;
}
Code explanation:
This is basically the so called Sticky Footer concept on which you can do additional research. You have your main content, you have your footer and we use a little trick with the push container to literally push the footer so it doesn't overlap any of your content.
The extra CSS is just for the sake of the Demo, I hope you can clean it up and implement it the way you need it.
This is not precisely what you are asking for, but you could scrap the bottom div, and add the large background image to body. Apply background-position: center bottom; to make the image hug the bottom of the screen. This will work particularly well if the image has a clear background.
body {
background: url('largeImage.png') no-repeat center bottom;
}
Ummm just set the height of div 'lower'? Or even min-height if you want it to be content flexible.
You could use Javascript to subtract the height of the upper div from the browser's window height, and if the result is larger than 0, set the lower div at that height?
For getting the window size, I suggest using this function. I believe it's cross-platform, though I haven't tested it recently.
function getDocHeight() {
var D = document;
return Math.max(
Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
Math.max(D.body.clientHeight, D.documentElement.clientHeight)
);
}