I am working on a responsive website using the Skeleton Grid and have a left floated navigation bar div that is 100% height of the browser window. It works in all browsers I've tested except for mobile safari on the iPad. In mobile safari the navigation div is 100% of the viewport, but when you scroll down on the page the div does not stretch to the bottom of the content. [See image below].
How do I make it so that the div is 100% height on the iPad, not just 100% of the viewport?
Dev Site: http://www.id8agency.com/jeremiah
Screenshot of the problem: http://www.id8agency.com/jeremiah/jeremiah.png (as you can see the white bar on the left does not stretch to the bottom of the page once you scroll)
How it should look: id8agency.com/jeremiah/jeremiah1.png (sorry, I don't have enough reputation to post more than 2 links)
Things I've tried:
Set height and min-height to 110% (works, but creates a scroll bar on
the desktop site)
Set height to height of content (works, but not all pages will be the
same length, so creates a scrollbar on some pages where content is
shorter)
Set position:absolute and and position bottom:0px (doesn't work,
positions the div at the bottom of the viewport, not the bottom of the page)
Set meta viewport tag to height=device-height and height=1000 (breaks
the responsive functionality of the website)
Thank you for any help you can provide!
try having the .navigation element be position: fixed; and then place the the content in the right in its own wrapper (something like .content-right).
Then set these properties on the .content-right element include a media query "reset" for when everything goes to one column (XXX is the breakpoint):
.content-right {
margin-left: 240px;
}
#media screen (max-width: XXX){
.content-right {
margin-left: auto;
}
}
Why don't you put on outer div and apply the background of the sidebar (sliced so it can be repeated on the y axis) to it and repeat-y?
It will expand up to the content end and when you don't need it anymore, you can remove the background from the media queries.
The problem also appears when I set my desktop browser viewport to a small height. I think the problem is, that all the 100%-heights here are relative to the viewport, and I think you want the navigation bar to be the height of the content, not the viewport.
But possible solutions would be to set a faux column on the #container-element (see http://alistapart.com/article/fauxcolumns).
Another possibility would be to measure the height of the #container-element with jquery and assign it to the navigation-bar. Something like:
var containerHeight = $('#container').height();
$('#navigation-container').css('height',containerHeight);
(I haven't checked if it works, but I think it should.)
Related
So basically upon resizing browser to smallest possible im still getting horizontal scroll bar for some reason. I cant have this for responsive purposes.
Any ideas?
http://www.techagesite.com/page-1work11122.htm
Another thing while im here
You will notice a email form and another div beside it with a border on it. When the browser shrinks the 2 divs collide and overlap.
Im still learning css and have tried sever approaches but nothing sticks.
Help would be greatly appreciated
The horizontal scroll bar is appearing because <ins class="adsbygoogle"> in the div #box6 has an inline width specified to 200px. To remove the horizontal scroll use the below css
#box6{
overflow:hidden;
}
EDIT: To get the desired effect as mentioned in the comment try the below css in media query for smaller screen.
The MailChimp form has width of 200px specified for its forms. This causes the right column to overlap the left section on re-sizing the window. So by setting width to the div container within the box6 and floating to left both the left and right divs will push the right section below when the screen doesn't have space to occupy both the divs side by side.
Also <ins class="adsbygoogle"> has a width of 200px given inline, so you can remove the width:45% specified for .right-column from your style sheet because this div will take the 200px width of its content.
#media only screen and (max-width: 480px) and (min-width: 321px){
#box6 .container{
width:200px;
float:left;
}
#box6 .right-column{
float:left;
}
}
I noticed a behavior that drives me crazy.
I have two divs, that have both similar css:
.one, .two {
position: fixed;
bottom: 6%
}
One div is for navigation, and other is for content, that has max 300px height. The problem is, that if the user resizes the browser window to really small one, the scrollbar is not shown.
I tried to change position to absolute, but then the ajaxify plugin breaks the position if new page is loaded. I couldn't find other ideas, how to position those divs at fixed position at bottom.
p.s. I pasted a sample test on http://pastebin.com/Bp1490dj
the background-green div is at the bottom with position:absolute;
from what I know a position:fixed; and or position:absolute; will never make a scroll. (please correct me if I'm wrong) so a way to go arround this is to set a min-height to body
body {
min-height:200px;
}
have a look at the fiddle http://jsfiddle.net/u2ZWa/
also, there is a fix with a scroll now. But you have to know the fixed elements will never be scrollable because they're fixed
Scrollbars are not compatible with a fixed positioning.
I'm developing a mobile website that integrates horizontal swiping. Unfortunately this has created a headache when trying to get the rest of my website layout to work.
http://jsfiddle.net/N7eWS/4/ - try resizing your browser window fairly small and you'll see the #footer (red) halfway down the content inside #wrapper (green). This appears to be todo with setting height:100% on most of the elements and then the absolute positioning applied to the horizontal swiping div (swipeview-masterpage-1).
I want it so that #wrapper expands to the height of the content, the #footer sits underneath #wrapper and is always off the bottom of the screen (you should have to scroll to see it).
Is there anyway I can make this work without touching (or perhaps making minor changes to) the swipeview divs? Any ideas would be appreciated!
One of the problems is the position: absolute on #swipeview-masterpage-1 and then another absolute on the parent. Parent absolute elements will not expand to the height of any absolutely positioned children (example).
You also have a random <span> in the mix, which is an inline element and will have a height of 0 anyway. Remove that to make things clearer.
Now to why your footer is appearing in a strange way. Your #wrapper will always be 100% of the parent height, your footer will always exist at 100px (header) + 100%. Disable the min-height property and you will see the wrapper collapse, and the footer sit at 100px. That's why the #wrapper content overlaps the footer.
So most of this site so far uses auto centering (the container and nav have margin-left/right:auto) and things seem to go all well and dandy except for the footer.
When I resize the size of the window everything is filled nicely except when I scroll horizontally the footer seems to be cut off on the right side.I've read that this may be a browser bug. Though it occurs in IE and chrome and firefox so it could just be sloppy coding (I am a big newb).
Here is the css:
#footer {
background-image:url(../Images/footer_bg.jpg);
color: white;
height:300px;
padding-top:20px;
}
/*I have 4 headings with Ps that I want to display horizontally side by side*/
#footerContent{
min-width:1000px;
}
/*So I tried floating <li> inside <ul> and limiting its width, which worked fine */
#footerContent ul{
width:1000px;
margin-left:auto;
margin-right:auto;
}
#footerContent li {float:left; width:250px; }
Just to reiterate it works fine when the browser is full screened or resized. But after you resize and you use the horizantal scrollbar to scroll all the way right then the background image is cut off.
I've tried width:100%, min-width, width:1000px; but none of those seemed to work.
http://postimage.org/image/3so264fnb/
Regarding your comment about Stackoverflow being similar
(at least as of 4-29-2012)
The issue on stackoverflow seems to be that the footer contains another div element, footerwrap, that has a width: 960px set to it, but footer itself has no width setting. A div is basically designed to simply "group" block level content. It is a common misconception that a div expands with it's content. Actually, a div expands to its parent if an explicit width is set on a parent. If there is none, then it fits the browser window. This is what you (and stackoverflow) is experiencing.
To get the div to relate to the content width, you must either:
Explicitly set the width or min-width of the container. So, if stackoverflow set a min-width: 990px (the 960px of the footerwrap + the padding of 15px on each side) on the footer that wraps footerwrap, then its problem is solved.
Set the container div to float, as a floated element wraps its content.
Take a look at this example fiddle. Note the first two div's experience the same issue you are seeing. If you shrink or expand the size of the iframe window in the fiddle, the first two div's will contract or enlarge with it, but still leave blank space on the horizontal scroll. The third and fourth div's have had my fixes above applied. The fifth div is to show the fact that the inner div, if not defined in width, will expand to the width of a container that has an explicit width set.
As a side note, it may work (I have not tested in many browsers, but FF 11 worked) to actually just add a float: left to the body element in those cases where the body does not have a set width. As this example shows, it seems to be effective in causing the first two div's to behave just like the 3rd and 4th divs.
I hope this helps.
Original Answer
It is a little unclear what can be done because there is some information lacking. Here are some things to look for:
Is your background-image wide enough (or can it / should it have a background-repeat: repeat-x applied to make it wider if needed)?
Does your footer width (1000px) match your upper content width? If footer is constrained narrower than what the upper content area (or header, etc.) is allowed to be, then it's background will not align.
That's the best I can do without seeing more of your html and css for the page, and not knowing the size of the image and your intention for how it is to function.
I'm trying to have the following markup:
body
#container
#content
where body is full width and has a background snapping to the bottom right.
where container has a set width of 960px and min-width of 600px, located in the top left corner of the page.
where content has a set width of 600px and is also located in the top left corner of the page. with a margin "100px 0px 0px 100px"
When I try to do this, the body looks good with a background-attachment scroll positioned bottom right. However, when the browser is resized to a width of less then 960px (or any other width of the container element) the body stops at the width of the browser, leaking the subelements out.
I would like to have the body always be at least the width of the subelements, instead of it breaking. I have no elements floating, which could break up the page, so I don't see why it is behaving this way.
I've made a sort of solution over here:
jsFiddle
Put the min-width on the html element, not the body. Then if the viewport is too small, the background-image will move out of the viewport and is visible when you scroll.
Is this what you want?