I have situation like in following example (see in chrome):
http://jsfiddle.net/3fLP6/49/
There are div rows with some content and one div with variable content which should fill rest of available height. Everything works fine in Chrome/Firefox/Safari/Android/iOS but I cannot find solution for IE (I need solution for IE7+) is there any other way to acomplish this in IE?
I assume you mean that you want a header that always sits on the top, a footer that always sits on the bottom, and one div that fills the rest of the available space; no matter how small or large its contents are. I use these terms in the rest of my answer.
Well, there are to my knowledge three methods to do this in IE7+:
Use the position: fixed CSS property to position the header, footer and the body. This means you have to set the header to a top position of 0 pixels and the footer to a bottom position of 0 pixels. Furthermore, you have to set the top and bottom property of the body div to the height of the header and footer respectively. Consequently, this method requires you to know the exact height of both the header and the footer. Unfortunately, some older browsers (e.g. IE6) don't support position: fixed, so if support for those browser is important, you should go with one of the other options;
Use percentages to specify the height's of all the div's. Clearly, this is quite easy. However, if you want to set a specific height for the header and footer, that isn't possible;
You can also create a div width a height of 100% which will act as the body div. On top of that you position the header and footer div's using position: absolute (because of that, this will also work in older browsers). Then, you add to the body element two other elements: one div at the top and one div at the bottom. These div's have to be the same height as the header and footer respectively, because these two elements will make sure that the scrollbar is showed when necessary. Of course, you'll need to set overflow: auto on the body div;
Finally, you can also change the height of the body div using JavaScript when the window is resized. A big disadvantage of this method is that JavaScript is required, and therefore this wouldn't be my choice.
I hope I helped. Please ask any question if I wasn't clear (enough).
Related
How do I get rid of the white space on either side of my website?
I want the backgound to be flexible to fit the browser window for whatever size it is. I think I need to resize the div container but I'm having lots of trouble.
http://www.dropshiplounge.com/
Your website was built using a fixed width and a margin that aligns it in the middle of the page using this rule in your css.
margin:0 auto;
Everything within your site has been built to within the specification of your wrapper width. Most responsive sites still have a page wrapper and a maximum width. If it's the white space that bothers set a background to the body element
body{background:color;}
or for an image
body{background-image:url('background_image_url')}
While im not the biggest fan of W3C refer to this for more information if you get stuck - http://www.w3schools.com/css/css_background.asp
If you are concerned that your site doesn't respond to different screen sizes and browser resizing then consider hiring a professional to redesign your site for responsive design.
Is this fiddle more or less what you're looking for?
I removed the hard-coded width on global_container_ and set width: 100%; on the header, along with repeat-x for the header background. I removed float: left; from the header and it's child elements, and made sure the child elements had left- and right-margins of auto. I also removed the hard-coded width from the headline, but you'll have to move the bottomline outside of it's container if you want that full-width as well (or remove the hard-coded width from the container).
Also, I don't think I had to change this in the fiddle, but you may need to remove the clearfix class from global_container_, or set it to display: block; in order for the full width to take effect.
It's the same idea for the footer - set it to width: 100%; and adjust the footer and child elements' padding and margin until they're placed where you want them.
I have a dojox chart (chartDiv) that gets created within another container div (panelContainer).
Even though I have the width and height of the chartDiv set to be 90%, it either introduces scroll bars into the chartDiv, or if I dtart altering the padding and margin settigns for the ChartDiv, it will spill outside of the parent container.
I know this is going to be a basic issue, but I have been playing with lots of different CSS settings but nothing seems to solve keeping the chartDiv within the confines of the panelContainer (taking up 95% of the space)
This fiddle might help you spot where I have gone wrong.
When you make a chart (or a dojox.gfx canvas) without width/height, it will try its best to determine its dimensions from the container you put it in. It can get confused though!
In your fiddle's case, #chart has a known width, because it's a block element and inherits its width from panelBG which is 100% of panelContainer's width.
The #chart div doesn't really have a height though, since a block element is 0px tall until you put something in it (or add some style to it). As a consequence, (I think) the chart simply assumes a height of some proportion to the width.
In your CSS, I see you have a #chartDiv rule with width and height 90%. I'm guessing you intended that to be #chart. That wouldn't actually have resolved the problem entirely though!
Assuming you changed that, the chart would now use 90%x90% as width/height, but if you try it, you'll see that the labels/axis are still positioned incorrectly.
Because you've floated the title container to the left, the chart container starts on the same "line" and tries to have its content "float" around the title container. This skews the axis labels out of place (green), while the actual chart (svg/canvas, pink) drops down below the title container.
To fix this, tell the chart container to stay clear of floats on both sides:
#chart {
width: 90%;
height: 90%;
clear: both;
}
It isn't really necessary to float anything though, and setting the height to 90% isn't always ideal. I made a suggestion in an updated fiddle: http://fiddle.jshell.net/froden/WsrHs/4/ .
The differences are just that the title container is a div spanning across the top, while the chart container is absolutely positioned so that it fills whatever space is left underneath. You can then just set width/height on panelContainer.
Absolutely positioned elements are taken out of the normal flow. This is why some of the elements are expanding beyond their containers. I have a feeling your floats are involved in that, too, but the fiddle is a little too complicated and a simpler version needs to be made.
I have overflow-x:hidden placed on the body tag of my page so that any content extending beyond the window will not be visible. No scroll bars show up, however, I can still scroll to the left / right to see the content (kinda defeats the purpose of overflow-x).
-ms-overflow-x: doesn't fix the problem either.
There is a wrapper 900px;
Inside the wrapper, there is a div inside:
width:100%;
padding-right:300px;
position:absolute;
left:200px;
I would like the inner div to hang over the right side of the window without causing it to scroll (and leaving a 200px space the its left).
Any help? Thanks!
Since the width of the div is 100%, there should never be an overflow, since the div will always fit 100% of the viewport (assuming you haven't changed the size of your body tag).
As for the padding, the padding is added on after the width, so you're saying the div is 100% of the width of it's container (the body tag), and the padding is an additional 300px to the right, which will be invisible as it's out of the viewport.
You might want to try giving the div an explicit size width and experiment that way.
It may help to see an example of your markup as well, to get an idea of what you're trying to achieve.
More HTML/CSS would be useful, but given what you have right now, my first thought is that your wrapper is still set to position: static (the default for HTML elements).
If you add position: relative to your wrapper, it will contain the absolutely-positioned element within it, and should constrain it to the overflow restrictions.
Additionally, you may want to look into the box-sizing property and how the W3C box model works. In short, your padding is adding to the width of the element, so it's actually (100% + 300px), which results in a size that is larger than the container.
If you don't want to mess with box-sizing, you can also add max-width: 100% to your absolute div to force it to not grow out of its container.
I'm using http://ryanfait.com/sticky-footer/ to make footers stay at the bottom. I was previously using height: 100%; on html and body to make it fill the whole page when the page was smaller than the viewport. However, this makes the body stop (no background) after the viewport, but the rest of the page continues. Stocky Footer doesn't have much to do with it, but it's an example of the code.
I've tried using min-height: 100%;, but that's not working either. Can't figure this one out, any help would be great.
Edit
The website is http://www.markduffymusic.com/index.php
To ensure that the footer is always at the absolute bottom of the page you can use the answer provided in this question: Make div stay at bottom of page's content all the time even when there are scrollbars
For this to work with background images, you must place the background-image on a single element that takes the full height of your page, which in this case is your #holder div.
You also have two floating elements in #pagecontainer which are not being cleared, meaning the browser will not assign a set height to #pagecontainer. To resolve this you need to as overflow: hidden to the #pagecontainer element.
Here is a useful CSS Tricks article about The How and Why of Clearing Floats.
When I resize window and when vertical scrollbar appears, if I scroll it way to the bottom, - the bottom breaks. I dont understand why, but I think it has something to do with the way how page uses 100% height. Any help would be appreciated!
Here's the page: zxsdesign.com/main1.html
Here's a screenshot
zxsdesign.com/bug1.PNG http://zxsdesign.com/bug1.PNG
It's a mix of you using the CSS height property and absolute positioning. ajm has talked about using min-height - ideally, you should be using it instead of height when you make things 100% high.
Onto your other problem. When you position elements absolutely, they're no longer part of the page structure. Instead, they live in a separate plane, and so do not affect the page dimensions. When your <div id="flashcontent"> runs past the window boundary, it doesn't affect <body>'s borders.
You can fix this by not using position: absolute. There's no real need to. Instead, you can position the #flashcontent element normally, and get rid of the #bg element completely - just give #flashcontent a background instead. Then use margin: 0 auto; and padding-top: 179px; to position it in the correct place.
Unfortunately height: 100%; is implemented differently... You can not be sure that a browser does what you want when you use it.
Try to use clear: left; or clear: both; in your style.
100% height is one screen height. If you scroll up, it does cover 100% of the height. Make your blocks scale too, or at least move to the center of the screen. You can do this by setting their top and bottom padding to auto.
Also, your head tag isn't closed properly. Check this
Your page is based entirely on using 100% height for all of your Elements. If the user's browser viewport is big enough, that's fine; however, if they resize their browser to be small enough, your page will be 100% of that smaller height and things will drop out of the bottom.
Look into setting a min-height on one of your container Elements. That will force things to stop resizing if the browser window falls below that height. Or, you can set a plain old height big enough to contain your flash piece on one of your container items and let the others inherit from that.
And, since IE6 doesn't support min-height (FF2+, IE7, Safari all do), you'll need to hack it in like so.