Is it possible using css to make <html> and/or <body> element to fill 100% width of browser viewport, regardless of how much it is zoomed in?
Currently, I set the html and body to 100% - but after a certain amount of zooming in, it stops and i get an ugly cut off of my header etc.
If i set it to say 5000px it works but obviously this affects non zoom too.
Therefore zoom seems to override the 100% width as it stops at a certain point and i want to overcome this.
without an example of your code is difficult to say, but make sure that you do not have any elements with fixed width, padding, margin, borders - e.g. a div with width: 500px; will definitely add scrolling to your browser and push the ancestor tags out of the browser viewport boundary.
Related
Please visit website: http://viewlike.us/ and change resolution to e.g. 1920x1200 - in mostly cases header (div with input form and submit button ) is not anymore 100%. How to avoid this situation? Ive tried to use width:100% !important, min/max width - but without success. I suppose there should be a small trick/fix or sth to avoid it but Im struggling with lack of ideas.. thanks~!
I think the default value for the width property is auto for most elements. And in this case, the <div> is expanding to 100 percent of its parent element, which in your case is <body>. Since the <body> tag has no width defined, it will default to 100 percent of the browser window. So even though the width of the page located below the resolution selection bar is greater than the browser window's width, the top bars (URL entry and resolution selection) still have the width of the browser window. That is why you see the edge of them when you scroll to the right.
You might want to experiment with using position: fixed in combination with the CSS properties top and left for your top bars. That way, those bars will be on-screen even when you scroll the page to the right. (I tried that breefly and it should work.)
I hope that helps you!
I have coded myself into a CSS corner. Have a look at this page:
http://staging.jungledragon.com/image/1082/sizes/large
Open this page and make sure the width of your browser window is smaller than the total width of the content, so that a horizontal scrollbar appears. If you now scroll to the right, you will notice that both the header and footer are broken, the reason being that they are set to 100%. 100% means the width of the viewport, not the browser window itself.
In my search for a solution, this one pops up a lot:
http://www.springload.co.nz/love-the-web/backgrounds-disappear-on-horizontal-scroll/
This is no solution for me since I do not know in advance how wide my footer and header need to be. Also, I cannot simply set it to a very high min width value since that would always trigger scrollbars, even when they are not needed.
How can I extend my headers and footers to the size of the actual browser window, whilst still getting proper horizonal scrollbar behavior. Is it possible at all?
I apologize that this isn't a definitive solution, but if you take a look at the page with a nice CSS debugger you can see that the width of html and body do not stretch to accommodate the overflowing image.
That's why the header and footer don't stretch. width:100% does not mean "width of the viewport", it means "width of the containing block."
The containing block is body. And body isn't stretching. It's is remaining constant regardless of the the width of the image. Thus the width of #wrappertop et al is not 100% of the horizontally-scrolling viewport. It's 100% of the body.
If you're really dead set on the viewport scrolling horizontally and having the header and footer stretch, I would first attempt to apply CSS to body (and/or html, which behaves as a containing block...sort of) to see if you can get them stretching. Then your header and footer probably will, too.
Centering the image or giving it a max-width are two good solutions -- but if that's not what you want, that's your prerogative. :-)
If I get a chance I'll see if I can experiment a little. But it's lunchtime. It's a place to start looking though.
You could set the minimum width of your header and footers to the width of your middle column (#colful), or the maximum width the page will ever be with images included.
min-width: 123px;
And you need to center the middle column too, instead of doing a left margin do something like this:
width: 900px;
margin: auto 0;
... ok nevermind, you already did. You need to contain the image inside that column. You can either manually resize the image, or do an overflow property like "overflow: none;"
I'm working on a website for a client, and I'm not excellent at css... still in the process of learning a lot about divs. I made a div that is supposed to stretch 100% of the page, and it works, unless a user is browsing from a lower resolution (1024 x 768 for example) and has to scroll horizontally, the div will then only extend to the original length of the browser window.
That coupled with the fact that my footer is behaving the same way, and is not sticking to the bottom of the page.
The code/website can be found at:
http://cliqthis.com/temp/roadhouse/index.php
Thank you for any assistance, or an explanation of why this is happening would be helpful as I am still in the process of learning.
You see the scrollbar for resolution 1024x768 because <div id='container'> has a width of 1064 pixels set on it. The parent div will have a minimum width of 1064 due to this.
Are we talking about the black bars not extending all the way to the right?
You need to make sure not only that those divs' widths are 100%, but that all their ancestors' widths are also 100%. With normal (static) positioning, the 100% width means 100% of the element's parent's width.
Using the Web Developer addon in Firefox, with Outline Current Element turned on should prove very helpful in determining which elements aren't as wide as they need to be. (Move your mouse around the page and it will outline the element you're over, and tell you the css selector path to it).
Also you might want to compare the structure to the original template you used. It seems odd to me that, for example, you have an empty div.#footer element, and then a table.foot element after it, rather than inside of it. Perhaps you accidentally broke something there?
Set up a minimum width for the div.
div.class { /* ... */ min-width: ___px !important; /* ... */ }
I have an absolutely positioned div that has a width of 100% with a background image tiling horizontally. When the browser is shrunk to the point that the width of the browser is less than the page, the remaining right portion of the div's background color is truncated.
Is there a better approach or a hack to resolve this?
Here's the example: link with the div in question being the menu.
Edit: to clarify, reduce the size of your browser so that the full width of the page (960px) requires a scroll-bar. At this point, 100% of the "page", or the viewable area, is actually less than 100% of the content. When this occurs, the menu's background doesn't span the remaining content that would require scrolling to the right to see.
This issue is present in ie7, ie8, and firefox 3.5. I haven't tested the other browsers but I can only assume that this happens there as well.
Thanks
Add:
min-width: 960px;
to the menu div selector. Fixes it for me.
With regards to the actual code structure, and as someone pointed out (but promptly deleted their post), perhaps structure your elements in a more logical layout. There's no reason to have the menu as the bottom child element (as far as I could tell anyway)
It's a more linear, free flowing code structure, rather then a spaghetti mess of containers in random orders, that it can turn into.
I am rather new to complex CSS, and have a question- I have a page which positions a floating element along the bottom of the page. It does so by setting the Bottom: 0, and Position: Absolute.
When the user resizes their browser to a very-small size, this element covers up other content on the page.
Ideally, The element would continue to float at the bottom of the browser at normal and large sizes, but if the browser window were to be shrunk too small, the browser would force a scrollbar, instead of moving the floating element any further.
Essentially, I want to tell the browser- No matter how small the window is, never render the page smaller than 800x600.
You could set html, body { min-width: 800px; min-height: 600px; }
YMMV in different browsers though.
It really depends on whether the floating footer needs to always be visible or if it can scroll off the bottom when the browser window is small.
I think some javascript might be easier to manage than a css solution. Keep in mind that min-width and min-height don't work in all browsers.
You can use jquery to make this easier. The
$(window).resize( callback )
can be used to set a callback function to handle window resizing.
I use the window dimensions as part of my resize code also.
var wh = Math.max(600,$(window).height());
var ww = Math.max(800,$(window).width());
Then I can set the size of a div in my page based on the window size.
$('div#mydiv').css('width',ww);
You can also set the value to auto to unset your specified value.
I know it is a bit of a cheat but you can use the old trick of putting in an image that is of the required minimum width in the floating element, and the same colour as it. It is then effectively invisible, but prevents the element, and therefore the whole page, from shrinking.