this is basically for a header of a page, the client wants to fill the header so that it fills the viewport completely, but when you shrink the page down vertically, they want the padding above and below the content to remain the same and stop shrinking the header, basically a minimum height of the content + the padding.
I thought this will be simple but I'm stuck, I've tried everything I can think of:
Demo: https://jsfiddle.net/suunyz3e/858/
With my demo, if you resize the window, the content shouldn't exceed the 'red' background of it's parent.
I've tried flex-noshrink layout-fill min-height:100%.
I'm sure this is possible but I can't seem to figure it out
Related
Ok I have a problem where one div's margin doesn't appear to stay relative to the previous div as the browser window re-sizes (height not width). This creates the problem where content overlaps as shown when in a wide browser. The picture bellow shows how in a narrow screen it works fine, however in the second picture you can see how the div has moved up based on the browser being made wider (27 inch imac).
If you go to: http://creativeabyss.co.uk/test/ you can see this effect for your self as you resize the window (You might need a big monitor). I cannot for the life of me figure out what is causing this, so I was wondering if any of you could help? The code should be available at the aforementioned link.
p.s I have set the background of one div to blue which illustrates that it is the size of this div which appears to be causing the issue...
Your problem is the fixed height on #OuterMenu. It is set to 300px, when you resize the browser window, the height of the content inside #OuterMenu decreases, but #OuterMenu is still 300px high, this causes some empty white-space to be displayed before the content which is rendered below it. Getting rid of the fixed height on #OuterMenu will fix this. It breaks on high resolutions because then the content inside #OuterMenu will be too high for its containing div which is only 300px high. In this case it will look like the content below this div is rendering over the top of the content inside #OuterMenu, but in fact it is the 300px height set on #OuterMenu which is limiting the space allowed for #OuterMenu to render its content within.
I want to build a fluid template where there is a content container with fixed margin on all 4 sides of the web page. If browser is resized, content box would change on all sides too keeping the same margins but changing height and width. Because of the height 100% issues I am not able to get the bottom margin correctly done if content is too long. In my case content just stretches without stopping and adding scrollbars.
See example:
http://jsfiddle.net/QzgHm/1/ (section element needs to keep bottom margin)
Try position: absolute; and then define pixels values for top, bottom, left, and right. This will essentially give you your set margin all the way around. I couldn't tell on your example which div or section you wanted these margins set on, so just be sure to use position: relative on the parent element
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 have...
<div id="tabs">
<!-- ... -->
<div id="interior-photo">
<img src="...">
</div>
<!-- ... -->
</div>
... and ...
#interior-photo { overflow-x: auto; }
Basically, I have a page broken down into a main section and a fixed-width right sidebar. Within the main section, I have my tabbed div. The entire page grows with the width of the window, so when the window is resized, the tabbed div grows horizontally in size too.
My problem is that the image that I'm loading inside one of the tabbed divs is generally much, much wider than the window usually is (they're panorama pictures; very lengthy horizontally, but not much vertically).
I know that I can force the contents of #interior-photo to scroll horizontally using the CSS rule above, but that only seems to work when that same div has a fixed width. Since I want that div to have a variable width, it always seems to display the full width of the image, pushing my layout way out of whack.
I know how to fix this using Javascript, but I was wondering if anyone has a CSS-only solution. If you need more information about my layout to solve this issue, please let me know. Thanks!
Unless your target div is constrained either by a fixed width style or by a container with a fixed width or whose ancestors include a fixed width, you won't be able to get your target div to acquire scrollbars. It will just go as wide as its contents, and the browser scrollbars will take over.
Actually, there is a way around this. You can specify to display the image with scrollbars, and thus confine the viewable portion to the size of the div. Basically, the image will expand to the size of the div, and then have a horizontal scrollbar if the horizontal image size exceeds the horizontal size of the div. Scrollbars will not be displayed if the image's vertical component exceeds the div's. You can set both the x and y to scroll on overflow with the overflow declaration. However, in order to use any of these, the div's size must be controlled through some means, even through the initial declaration.
#interior-photo { overflow-x: scroll; }
I've coded myself into a corner or I am overseeing something obvious here. I have a semi-fluid CSS layout that is designed like this:
header - 100% width at all times, contains a x-repeated background image
container - fluid (960px to 1200px, centered, contains two columns)
footer - 100% width at all times, contains a x-repeated background image
In almost all cases this works fine.
In summary, the design as a whole scales to any width, yet the content part only to 1200px at a maximum. However, since this concerns a photo site, sometimes images are wider than the container width of 1200px and the image breaks out of it. This is perfectly fine, I want the full image to be shown. However, I want the header and footer to scale to the widest element, in this case the image. This is not happening and is particularly troublesome when I resize the window to a width less than the image and then scroll to the right using the horizontal scrollbar: it leaves a clear gap on both the header and footer whilst I want them to stretch to at least the image/content width.
Simply setting the width to 100% is not enough as that concerns the viewport, not the content width. I can forcefully use min-width with a large value for the header and footer, but that leaves a horizontal scrollbar in normal resolutions. I could hide that scrollbar using overflow:hidden but that would chop of content and not display a scrollbar when the window is small.
To make a long story short, I guess what I want is that this layout would work as a table would work: if one column's content is wider than its size, it pushes all other rows to that same width. The largest width determines the total width. I prefer a solution without javascript, but am thinking it is either not possible or I am overseeing something very obvious?
100% width sets the element's width to 100% of the width of the element it is contained in. In your case, it seems this is the window itself (or the body element). To make the header and footer divs (I'm assuming you're using divs here) scale with the image, they will probably need to either be included in the same div that the image is in, or inside a div that the image div is also in, assuming that div is scaling to the correct width (don't assume it is scaling to fit the image).
However, in many cases using a table for your layout can be much cleaner, and will handle the type of horizontal scaling you're looking for without needing to resort to css hacks.
To make a long story short, I guess
what I want is that this layout would
work as a table would work
display: table on the common container of these elements, and display: table-row or table-cell on its children. This will not work in IE6, but clever things can be done with its CSS expression() hack to simulate this.
I would rather suggest, however, that you not set a maximum width at all, and allow the design to flow better according to the user's desired window size.