I've gone through the answers for similar questions and none of the answers helped with this issue. My background image is being cut off on the bottom at the viewport. If I remove the background image and put a solid color as the background the same thing happens. The text on the mobile page can be seen, the background just cuts off.
View the site using Chrome's device mode as iPhone 6 to replicate. Any help on this matter will be greatly appreciated!
Dev site
Your content element is set to height:100% which makes it 100% of its parent's height. It ends up not being tall enough to fit the 1000px tall element within it. Normally the element would just expand to contain its contents, but your height attribute overrides that behavior.
content also doesn't seem like it needs to be position:absolute; either. That isn't helping the sizing issue.
I would get rid of:
div.content {
position: absolute;
top: 0;
top: 0;
width: 100%;
height: 100%;
}
Then also remove the inline-style height: 1000px on the .page element.
I've added a sidebar tab "Subscribe" (jquery.tabSlideOut.v1.3.js) to my site (visit http://thecasket.co.uk/). Desktop browsers fine, but causes horizontal scrollbar to appear on iPad - and pages start sliding around. The tab has a negative absolute position (-290px, width + padding in my css for the slide-out-div) set in the javascript. On the iPad the scrollbar takes in the width of the slide div.
<div class="slide-out-div">
my subscribe form
</div>
.slide-out-div {
padding: 20px;
width: 250px;
background: rgb(255,255,255);
z-index: 9999;
-webkit-overflow-scrolling
}
I've tried adding: -webkit-overflow-scrolling: touch; but doesn't seem to do anything and I'm not really sure what this would do.
Any help on fixing the scroll, much appreciated.
As you don't define overflow:hidden to any parent container, the mobile devices expands the viewport to the size of the content. You you could go with this approach and set the overflow value or you can use position: fixed instead absolute on the slide-out-div. Both should do the trick.
Also note the text of the <a>-element with text-indent: -99999px; is "content", but I guess it should be "subscribe".
Isolated test case (view in IE 7 or IE 8/9 in IE 7 mode)
Viewing this page in IE 7 is causing my width value to be ignored. If you remove the padding value, the width is properly applied, but when you add in the padding, it causes the entire page to grow, and it treats the padding almost as margin. The larger the width of the page, the larger the blank area to the right of the element. I've been unable to find which bug this is, and, more importantly, how to fix it. Has anyone seen this and does anyone know a solution?
Things I've tried so far:
zoom fix
display: inline-block (recommended for double vertical padding issue)
It isn't line-height (it's a width issue...)
Screenshot of the issue:
This div should span the entire width of the page, and no more, but you'll notice the scrollbar here:
And the result of scrolling to the right:
This should not be there.
Examining the element in the browser tools shows the width to be incorrectly the full width of the page, instead of the full width minus the padding.
Disclaimer: I'll ignore the functional requirement and your comments on the other answers and just concentrate on the concrete problem.
This IE7 specific problem is caused by using an offset (e.g. top, right, bottom or left) on a relatively positioned element. If you offsets a relatively positioned element, then it will basically still retain the whole space of its original position. Note that this doesn't happen when offsetting absolutely positioned element.
Before the left offset is been applied, the relatively positioned element is due to its width and and the right padding completely out of the viewport and hence a horizontal scollbar will be generated. After the left offset is applied on the relatively positioned element, you're basically leaving a space of the same size as the offset on the other side of the offset, still outside the viewport.
A bit sane webbrowser will during redrawing however discover that there's nothing visible outside the viewport and hence hide the scrollbar again. IE7, however, isn't that smart enough and retains the scrollbar.
After all, using left offset was technically been the wrong solution. You should in first place have used margin-left instead of left. Unlike the offset, the margin doesn't leave an empty space on the original position, but really pushes the whole element to the desired position.
So, here's how your script is been fixed:
$('#el').css({
'width': document.body.scrollWidth - 200,
'padding-right': 200,
'margin-left': (-1 * (document.body.scrollWidth - 322) / 2) - 1
});
By the way, I wonder how that float: left; makes sense in this construct wherein you apparently want to simulate a 100% width. It'll probably be for other purposes not visible in the concrete example.
You can solve this without using javascript for calculating width, and no padding, instead use position: absolute. Here's an updated fiddle. It will work in any browser
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left:0;
right: 0;
top: 0;
}
http://jsfiddle.net/LRpHq/7/
I was having this problem with a skeleton.css implementation. Specifically, my #header was taking the width of body, which took the width of html. The remaining content had a set-width of 978px. So when the window was smaller than 978, the background of the header would only render to the width of the viewport. i.e. - if you started the render at 500 wide, that's all the wider #header would get. Dragging a wider width of the viewport had no problems, but right scroll cut the header to the size of initial viewport.
My fix: html,body { min-width:978px } /* your width may vary */
Since you seem to be fine with using Javascript, adjust your resize() function:
function resize () {
$('#el').css({'width':$(window).width(),'position':'absolute','left':'0px'});
}
Fixed the original post as it was off by miles.
edit:
Tested in a sandboxed IE7 and it works. (what can i say, i go out of my way to get something perfect, also am new around here so that bounty would really help to be very honest) to also note that it works natively in IE7, IE8 and IE9, FF3.6, Opera 10 and should work in Safari with no problem, Chrome didn't get mentioned as it's my default browser and it works, no doubt about it.
Here is the JS:
function resize () {
$('#el').trigger('resize').width('100%');
}
resize();
and the CSS:
#container {
width: 320px;
border: 1px solid #000000;
min-height: 500px;
margin: 0px auto;
}
#el {
background-color: #FFFF00;
min-height: 45px;
width: 100%;
position: absolute;
left: 0;
}
i found solution for similar problem here. see if it can helps you too.
I hope this helps explain the issue I am having
I have recently designed a horizontal scrolling portfolio for a client, the rights and wrongs of horizontal web design, is a sligtly seperate topic but alas the client wanted something different.
Im having a real issue with the bottom div though As the monitor size is reduced its creating the browser scroll bar down the side as the div image is overlapping the monitor size.
Wouldnt be such a huge issue but because of the nature of the horizontal site its producing a diagional scrolling effect.
Is there away to prevent the screen expanding from the actual monitor size using css or anyother solution? I'm probably staring at the answer as I type but brain doesnt seem to be working unfortunately.
Assuming the content area is flexible in height and the background div is a fixed height, then this should solve it (prevents content area from ever being bigger than browser height). For purposes here I'll assume you have some way of targeting those div's:
html {height: 100%;}
body {height: 100%; position: relative;}
#content {position: absolute; top: 0; bottom: (whatever the height is of your bottomBkg);}
#bottomBkg {position: absolute; bottom: 0; left: 0;}
The combined top/bottom on the #content won't work in older browsers if that is a concern for you.
You can use css3:
html{overflow-y:hidden;}
That will prevent the vertical scrolling
Hello fellow stackies,
I'm developing a site and I have a small "problem". It's not that important, the site works but it's just one of those annoying things that u keep scratching ur head about over and over.
What I'm trying to do is mix static height with dynamic height.
Example:
HTML:
< HTML >
< BODY >
< DIV class="header_with_menu" >
< /DIV >
< DIV class="main_content" >
< /BODY >
< /HTML >
CSS:
body{ margin: 0; padding 0;
width: 100%; height: 100%; }
.header_with_menu {display: block; margin-left: 100%; margin-right: 100%; height: 160px; }
.main_content {display: block; margin-left: 100%; margin-right: 100%; height: 80% }
As u can see, nothing fancy. I use a custom scrollbar javascript on main_content.
It works fine until I start screwing with the window height of firefox (or any other browser).
What I expect: When I make the window of firefox smaller and smaller, main_container will get smaller and smaller, but, remain inside of the firefox window (since it's height is dynamic, it will simply adjust because it's cool.)
What happens: The height of main_container will eventually get stuck at a certain height, which I don't specify, and content will start disappearing out of view at the bottom of the browser window.
I want main_content to stay inside of the viewscreen and auto adapt to the height of the browserwindow.
How do I do this??
It's annoying when you have a smaller monitor with just 768 px of height and about 10px fall outside of the scrollable area... And the worst thing is, I can't seem to get it behave on my own. I've tried making things absolute, they just overlap each other and now way stopping that since they're both absolute and outside of normal flow. I've tried experimenting with maximum and minimum heights in percentages for both header and only container... didn't work. Searched for javascript to auto-fiddle with my css' height or max-height percentage, didn't work out too well...
basically i've been sparing with this for two days now and I'm just not creative enough to come up with some solution.
Is there a pure css solution for this?
(P.S. I'm using 77% height now for main_content since that seems to be the perfect border: not too small for 1920x1080, and not too large so content will start to disappear # 1440x900. 78% will make content start disappearing and below 75% just makes it seem ugly at 1920x1080.)
I'm sorry for answering my own question, but the answer is: use a flow layout with a script that calculates the space to the bottom of the screen using percentages calculated by the current width and height of the window, to calculate the height of the content and/or footer div.
If I have time I'll post the script here as an edit.