I have created a layout in CSS/HTML with the following structure:
Navigation in the footer scrolls the content horizontally to show two different screens. The screen content is fixed height and vertically centered and the layout always fills the entire window.
Because my content has a fixed height, I need the browser to display a vertical scrollbar when the window reaches a certain height.
I also have a couple of position:fixed <canvas> overlays that get cropped by the <html> and <body> elements which are set to height:100%; width:100%.
I hoped that by setting min-height:700px on the <body> selector I could get a scrollbar to appear when the window got too short. This doesn't seem to be work.
How can I make this website generally full-screen but scroll when below a minimum size threshold?
Well, that should effectively make sure the body is always at least 700px. However, position: fixed will still anchor them to the bottom of the viewport, so you will essentially be only scrolling the background. I believe you want the header/footer bars to stick to the top and bottom, so you can always see the full content between them?
So, does something like this fiddle behave more like what you're looking for? http://jsfiddle.net/jblasco/qPB9k/8/
It uses a wrapper div that does the min-height, and uses absolutely positioned bars instead.
Try this: overflow-x: auto;
It will try to put a horizontal scroll bar once the content exceeded the size of its container.
Related
I'm trying to stretch an image vertically in a parent container of my site (not the full body), it is the div with the id "imagen-fondo"
I have tried either backstretch plugin and also just css background-image with background-size to do it.
But the problem in both cases is that the calculated height of the parent container is smaller that the immediate child height, so, the background image looks smaller than the content itself.
How can I make it to be the same height as his immediate child or at least bigger?
You can see the live demo here:
http://50.21.181.12:3001/plantillas/mba
UPDATE:
I think the problem is that div#imagen-fondo is getting the height of the window and not of his content, that is the reason that when the screen is big, the problem doesn't happen, but when the height of the window is smaller than the content it happens, you can check it with this two screenshots, just as you start scrolling vertical the background image ends:
Something with overflows?
UPDATE 2:
For now I introduced some javascript to make it work,
Getting the footer offset position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Clear floats in parent div using clear: both;
Or use clearfix on parent div.
For now I introduced some javascript to make it work,
Reading the footer position and stretching the height of the ".backstretch" div to that height.
But, if you resize the window to make the vertical scroll bar appear and inspect the page, you can still see that the parent container "#imagen-fondo" (from where backstretch should automatically get his height) is still getting the height of the visible viewport and not from the content itself.
If anyone finds a better way to do it CSS only will use that approach instead of this dirty one.
Whenever my website is viewed with a resolution that is insufficient to display the full page, a horizontal scrollbar is added. The problem is that my 100% width div with background image does not apply this background image to the portion that extends beyond the scroll bar.
This same issue is actually appears here on Stack Overflow as well. If you shrink your window small enough that you have a horizontal scrollbar, you can see that both the header and footer div areas do not extend the background image/color.
One way I have figured to resolve this is to set the header/footer div to fixed but then the content past the end of the div is lost :-(
Anyone have any suggestions or a workaround? ty!
When you set an element to 100% width it will have the same width as its parent element. The body tag's width defaults to the width of the viewport. According to the standard, when an elements contents is to big to fit in it, it will overflow. This is what you're seeing.
To get around this, set the min-width on the body tag. Something like the following, obviously change the width to whatever works for you:
body {
min-width: 960px;
}
Surly if you used something along the lines of
body{
background: url("yourdir/yourimage.jpg") repeat repeat;
}
Instead of having a background div? It'd be helpful if you also added the code for the background div
This margin is a browser scrollbar that appears during resizing and makes viewport smaller. This can be easily fixed by adding hidden overflow to body. Check #242684
I have multiple divs with text and what not in them. When the page is made smaller horizontally all of the elements shift. However,if you resize this page, elements disappear and nothing moves. How do I fix this problem so it is like this page?
Thanks!
If you view the source of this Stackoverflow page, then you will notice that all of the content on the page is wrapped inside of a container div with the width set to 100%, and the margin and padding both set to 0. If you want to have a fixed width, then do not use percentages, but instead specify your page to be a specific width in pixels.
If you want to center all you content, wrap it in a div like so:
<div class="wrapper">
<!-- Your Content !-->
</div>
And then add the following to your stylesheet:
.wrapper {margin:0 auto;width:960px;} /* Change 960 to desired width */
I hope this helps!
Predefined sizes make the elements do not move when you resize the screen, that will keep their size in different screen resolutions also, that is to take into account. Also you must use margins and padding fixed.
In short ... not more percentages, but don't abuse fixing everything
My code is as below:
<div id="frame1" style="overflow-y: auto;overflow-x: auto;width:87.5%;height:100%;" >
content
</div>
Here declared div working as a scrollable div but it doesn't resize as per window resize.
I have a situation where I need, on the same line, When the window is resized and the div's
eventually touch, I need them NOT to wrap, but instead, enable the horizontal and vertical scrolling.
Please Help...
<div id="frame1" style="display:block; width: 87.5%">
content
</div>
Height will increase based on content
Not quite sure what you are trying to do here. I'm guessing you have 2 div's next to each other and you want one of them to start scrolling when the space is too small for them both. If you know the width of the other div you could just do something like right: *div width* which would make the 'frame 1' div fill the rest of the space when the width was set to 100%. Then if the content of this div were too large for that div, scroll bars should appear. You would obviously need to set the position value to something other than static to get the top, right, bottom or left css values to have an affect.
I recently used something similar to this on a site with 3 fixed div's; a header, a footer and the main content. For the content, I have top set to the height of the header and bottom set to the height of the footer with a height value set at 100%. This makes the content fill the space between the header and footer. I then set the overflow-y value of the content to scroll so the vertical scroll bar is always visible but it is only on the content as the header and footer don't scroll anyway which gives a really nice effect, especially with webkit scroll bars.
Again, I'm not really sure if that was what you were asking. Temporary link to site here (resolution-gaming.comuf.com).
I have just finished redesigning this site (www.imustsolutions.co.za) and I have a problem with the header and the footer when the user zooms in (Cntrl + in FF).
Here is the problem:
The background color of the footer/header does not paint to fill the rest of the screen (horizontally) when the user zooms in.
What am I doing wrong?
Here is the site again: www.imustsolutions.co.za
Thanks in advance.
Regards,
M
The problem is that the width of your header is set to 100% (100% of the original browser window), whereas your main content is set to 980px.
So when you are on a full size mode, 100% will be greater than 980px, but on resizing or zooming in 100% will become less than 980px and your header will break whereas the main content will overflow to the right, if need be.
Setting a min-width for both the header and the footer to the same value as the width (plus the padding and margin if any) of the main content is usually enough to fix such issues.
With regard to your site, as it seems your main content is set to 980px you may then try:
#header {min-width:980px;}
That's basically how it's supposed to work. The width of a block-level element is determined by the width of its containing block. And the width of the initial containing block (i.e. the containing block of the html element) has the dimensions of the "viewport" (i.e. the browser window).
In other words, unless you've explicitly set widths on your blocks to make them wider than the viewport, they'll never be wider than the viewport.
You can see the same thing happening on the footer of StackOverflow itself too, for example: if you zoom in on this page until you get a horizontal scrollbar and then scroll sideways, you'll see the gray background chopped off too.
One way you could fix this is by turning the entire page into a float, since the width of floating elements shrinks to fits the dimensions of its contents and isn't contrained by the dimensions of the viewport.
Simply adding float: left to the html or body tag should do the trick. I haven't tested that in all browsers, though.
Your header and footer DOM element should be placed within main content. So your header 100% will be limited with main content size:980px