After a few days of hounding google for an answer, I am hoping some genius out there is able to help me on this tricky problem im having.
Overall what I am trying to achieve is a 1 page website with a very large bg image that uses jquery to scroll between each div ( which is effectively the same as a 'page', set to 100% height ).
My problem is..
I have a body background image, that is approx 5000px height.
I have 3 divs that I want each to be 100% height of the browser window.
Thus when scrolling from div to div the body bg is underneath.
I cannot set the BODY to 100% height as that will simply 'cut off' my bg image to the browser height.
I need to keep my bg image in its full length.
Is there any possible way to achieve this?? I read somewhere you can set an ID to your BODY element however Im not sure that would be effective for what im trying to achieve?
I know some one out there has an answer :)
Mush appreciated
I have seen you example code now, and I think i found the problem.
You forgot to make the html tag 100% in height, this results in your problem. Try to do like this:
html, body { height: 100%; }
I made a jsFiddle demostation here: http://jsfiddle.net/Allan/Vx9dC/
Related
I'm having a hard time figuring out how to make my footer stick to the bottom of the screen, even when the page is smaller than the screen.
www.test-domain.sk
I'm guessing it's something to do with the container length, but I'm honestly completely unsure.
Any help would be appreciated. :)
This concept is something known as a sticky footer. The Mozilla Developer Network has a page here illustrating a few ways to accomplish it. In the example of your www.test-domain.sk page, I believe you can add the following css to make your footer stick to the bottom of the viewport (screen).
html {min-height:100%)
body {100vh}
div#page {min-height:100vh; display:grid; grid-template-rows: auto 1fr auto}
Assuming you are looking for something like this, but if not, be more specific. As in post the code you already have.
footer {
position: fixed;
bottom: 0;
}
When the slide transitions, the background image displaces below the carousel before going back to the correct position. This happens on every slide every transition (when clicking or waiting). Here is a GIF showing what happens. http://gyazo.com/350334669db0e76f6d2b6e80fce0aed3
I have looked through some similar questions (all resolved). Only one seems it's the same issue, but the solution isn't applicable in my situation.
Here is the code. It is done mostly in jade with some html here and there. https://github.com/CastawayLabs/MCFreelancer/blob/master/views/index.jade
Your div was position:relative. Bootstrap uses position:absolute to perform the transition.
div.item(style='background: url(http://p1.pichost.me/640/25/1477731.jpg) no-repeat; background-size:cover; width: 900; height:400; position: relative;')
See patched commit
This is a cached map from the software: ogmaps
Please look carefully at the tiny shades below the address bar in the main window here.
On once clicking the minimize/maximize button, it gets showed up fully. Tested on firefox, and google chrome.
Can't say that this is the browser problem, since when I loaded this cached map on the Qt widget, I still had to click the minimize/maximize button, to get it gets showed up fully.
The html for the map is too long to be posted here. If there is any relevant section that you know of, then please tell me and I'll post it here.
EDIT 2
Finally I have managed to upload that html code here: http://code.google.com/p/earthhtml/source/browse/trunk/ogmap.html
Please have a look about the div tags.
Although this may seem like something trivial, it worked out for me. I had the exact same problem (among other GM problems) using GMv3 and couldn't figure it out.
I added a min-height to the div containing the map (with !important)
I removed ALL max-height & max-widths from the CSS
This fixed the 'small map' problem plus an additional problem I had with the GM pins and infowindows.
On top of that, make sure that there are NO divs with a high z-index on your page, as GM will resize the containing div not to interrupt with the top div. Another div with a higher z-index will also mess up the map and make the height and the width go crazy.
div#map{
min-height:600px !important; /* or any value that suits you */
position:relative;
margin-left:0;
margin-right:0;
left:0;
border:1px solid #979797;
}
I hope this works as good for you as it worked for me. If not, good luck!
OK I'm using SuperSleight to fix the background transparencies on the png images in ie6. It all works as it should except it is scaling my background image to 100% height.
I have the following set to 100% because I want my footer to stay at the bottom. It seems like this is affecting SuperSleight and is causing my background image to scale. For most people simply changing the background image format would work but Ive worked a fair amount trying to remove gradient rings and using a png came out with the best result. Does anyone know a fix for this?
body, html {
height: 100%;
min-height:100%;
}
body{
background-image:url(../images/content_bg6.png);
background-color:#3e2f24;
background-repeat:repeat-x;
}
I worked around the problem by creating a div wrapper for all the content within the body tag initialized supersleight to that specific wrapper and its children avoiding the body tag.
$(document).ready(function(){
$('#pageWrapper').supersleight();
});
The above is a work around.
I'm trying to wrap my head around CSS positioning guidelines. I'm trying to figure out how to make a sticky footer but have it stop being sticky when the main content area can no longer be condensed. An example of what I'm talking about can be found here http://ryanfait.com/sticky-footer/. Can someone explain to me why the footer stops being sticky and particularly what CSS properties cause this to occur? For me, as I look at the CSS it looks like the footer should just stay sticky to the bottom of the browser window always, but this isn't the case here. Why?
Thanks for the help.
Give this one a try.
http://www.cssstickyfooter.com/ (link no longer valid)
It is similar to Ryan's one but, from memory, I think I've had better luck with this (although both are very similar).
You have to declare the footer outside of the wrapper and give some height for footer and margin-top should -(footer-height)px
<div id="wrapper">
---
------
</div>
<div id="footer">
</div>
# wrapper {
width:100%;
height:100%;
}
#footer {
width:100%;
height:25px;
margin:-25px 0px 0px 0px;
background:#ccc;
}
Here's a brief summary of a layout I use fairly consistently as a basis for projects that require a sticky footer. Not sure where I initially got all the code from but it was pieced together over quite a while.
http://jsfiddle.net/biznuge/thbuf/8/
You should be able to see from the fiddle that you require a '#container' element which will wrap the whole of the page. this gives you 100% height (note the hacks for ie present in the css), and allows and child elements of this 'container' element to derive a height, or position relative to it.
Pitfalls of this method are:
You need to provide some padding/margin at the bottom of the '#main'
element so that the footer is displaced further than it naturally
would, so need to know at least a broad range of what your footer
height should be.
IE doesn't seem (<=IE8 not tested 9) to recognize browser resize
events if you only resize the bottom edge of the browser, so in
that particular case the stickiness would fail, until a horizontal
resize was also presented as an event.
if you want a fixed width to the layout you should place this
constraint not on the '#container' element, but on the '#page'
element, and perhaps introduce extra elements beneath '#footer' to
provide any width constraints there.
Good Luck!