See dropbox's site here: https://www.dropbox.com
Notice how the footer "Learn more" stays at the bottom until you click or scroll down, no matter how much you resize the window?
position: absolute;
bottom: 50px;
left: 0;
width: 100%;
text-align: center;
cursor: pointer;
Above is CSS for the footer part but thats not causing the effect.
How can this effect be achieved, I cannot figure it out.
I assume you're talking about that front page that always fills the whole browser window with the "learn more" sticking to the bottom of the window?
There are multiple ways to do this, here's one:
Put your first page in a <div> (or any other container) and set it's height to 100vh, which will always resize to the height of your browser window (100% of the view height).
The link "Learn more" is then simply attached using position: absolute;.
The following pages can then take any height, although you can use the same technique to make pages you can scroll through (similar to a slideshow).
You can try it using this fiddle.
Position:fixed is what you want, not absolute.
Related
So I'm trying to have my footer in the bottom of the page at all time without using "position: absolute" as it overlaps the content of the page when the screen gets smaller. I also do not want to use "position: fixed" as I do not want the footer to be visable at all times. When I use "position: relative" it creates a white space below the footer and I cannot remove it. I would be very grateful if you could help me. I'm currently using Bootstrap 4 for my project. Here's my code:
<div class="container">
(some content)
</div>
<footer>
(some content)
</footer>
css
footer {
position: relative;
bottom: 0;
width: 100%;
background-color: grey;
text-align: center;
}
Thanks in advance.
Use position fixed instead of absolute with fixed the footer always at bottom of the page. And bottom 0 then it will always be at bottom. If anything overlap the footer then you can do z-index to 100 or higher so nothing will overlap the footer.
compare document.scrollingElement.scrollHeight and window.innerHeight in js.
if they are equal then that means your content is less than the view port in terms of height and you can use position absolute at bottom for footer as it wont override with your actual content.
if document.scrollingElement.scrollHeightis great than window.innerHeight then that means your content is bigger than the view port so without worrying you can place the footer at the bottom without using position property.
If window resizing is your problem (resizing may change height of your document) then you can use resize event listener on window. There you can call a function to do above mentioned steps.
I'm pretty lost as to where to even begin so I will try to explain. I'm making a Hardware Store for my term project in Aptana Studio and am running the site in Google Chrome. Apparently, running a site in Google Chrome makes it automatically responsive? As you can see in the following screenshots, the site is fixed on the left side and responsive on the right side:
(resize 1)
(resize 2)
(resize 3)
(resize 4)
Of course, the black and white photo does not resize, but I actually don't want it to. I just want what is in the header (the logo and photograph) to stay the same size - to stay fixed on the page. Take Ace Harware's website as an example: http://www.acehardware.com/home/index.jsp
Everything in the site is constrained to certain dimensions. When the page is fully open, the content is centered and there is a margin of white space on either side. And when the page is resized (smaller), the margins start to disappear until finally there is a cutoff point - and the content does not change position anymore.
(full page)
(first resize)
(second resize - even though the page is smaller, the content is fixed)
This is exactly what I'm trying to do with my Hardware Store site. How do I achieve this effect? I've heard of bootstrap but I really don't know enough about it or which template I would use. Thanks for any help/adivce. If it's too complicated to explain here, please send me to a good tutorial you might know of.
What you're trying to do (at least, what i understood) is not a matter of "responsive". You're just trying to keep the whole page content always centered. (acehardware.com is not responsive eather).
You just need to define a constant width for the main div (the one which will contain the whole page content, except the background), and then keep it centered in the outer div, no matter the screen size.
This is what you got to do:
#main-wraper {
margin-top: 5px;
margin-bottom: 5px;
width: 360px;
height: 420px;
position: relative;
left: 50%;
margin-left: -180px;
background-color: white;
color: black;
}
#outter-div {
background-color: grey;
position: absolute;
width: 100%;
height: auto;
min-height: 100%;
overflow: hidden;
}
<div id='outter-div'>
<div id='main-wraper'>
<!-- The whole page content -->
</div>
</div>
This will keep the div centered in the parent container, and the parent container will be hidden the smaller the screen is.
I used smaller dimensions for main-wrapper in the snippet in order to make it easier for you to watch the effect in a smaller box. BUt you should use your own width. Just have in mind that the "left margin" for that div must have "half the width of the div" as a negative value. "left: 50%" will always center the div and keep the effect.
I want to create a page with vertically centered content (I'm using this method). I need to use two different page backgrounds. One is assigned to html tag and the other one to the body tag (it doesn't matter if I'll create div's instead). The first one is a background picture (full width & height of the view port, fixed, no-repeat) and the other one is just a pattern, intended to overlay the picture (repeat). I tried to use CSS3's multiple backgrounds for this case, but it didn't worked as I intended.
The problem is that when the content exceeds the view port, the body's background covers only the height of the view port. The solution for this is quite simple:
body { min-height: 100%; }
But it comes with a serious drawback. If I set the min-height value while the content doesn't exceed the view port, it won't be vertically centered.
I created a fiddle to help you better understand my problem. Don't mind the JavaScript as it does not play any role in this case. I used 1x1 px background images as an example.
Try to toggle the content's height while the body's height is set to 100% and scroll down. You will see what I'm talking about. You can fix that by toggling the body's height, but as soon as you toggle the content's height back to auto it won't be centered vertically any more.
I want the body's background to cover the full page height and have the content positioned in the middle no matter if the content fits in the view port or not. I've tried to achieve that for several hours and I failed, so maybe some of you know something that I don't and could help me with that.
Here is what I came up with:JSFiddle
I avoided your problem by making the .block div the size of your screen by fixed positioning. After this I used the .block div to scroll the elements inside. Hope this solves your problem ;).
.block {/*made .block fullscreen size so you cannot scroll the page anymore, but scroll this div instead*/
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
text-align: center;
overflow-y: auto;
If you don not need < IE9 support, you can use transforms to do that.
http://jsfiddle.net/0tgvrw3k/1/
Basically you don't need the .block and make the vertical alignment using top, left, and transform. You need position: fixed;, as position: absolute; will make the viewport scroll.
Please do not forget to prefix the transform with -webkit-, -moz-, -ms- and -o-
I have a website where the header/footer is to remain stationary at the top/bottom of the screen while the content scrolls. I have been following this question that explains how to achieve this effect which sort of works for me. As you scroll down the content, you will notice that the background-image for the content becomes chopped off. I am confused to why this is happening as I have set the background image to repeat-y. I also noticed that the footer appears to be hiding some of the content as well.
To achieve this content-only scrolling effect, I added position: fixed; to the header/footer. I left the content with position: absolute; to keep the footer fixed to the bottom of the screen.
-> Link to website
First off, add bottom: 0 to your footer. That will bring it down to touch the bottom.
Now, take position: absolute off #content.
Lastly, add extra padding at the top and bottom of #content so that your text won't get hidden behind the header/footer.
Firebug tells me that will solve the problem on your site. Ask him yourself.
this is the most stupid question here on stackoverflow...
My client would like to have always visibile sidebar in all pages of his website..
Some pages have scrolling, other no, so he see logo and element jump position from one page to another of the scrollbar width ...
so... there is a way to "lock" the scrollbar space, so the he don't see "jump" form one page to another?
thank you
html {
overflow-y: scroll;
}
forces the scrollbar to be shown always
use fixed position:
#sidebar {
position: fixed;
top: 10px;
left: 10px;
}
With the above, the container div will always stay 10 pixels from the top and left of the browser window. So when the page scrolls, it will not move.