I am trying to use this site in an iFrame with iFrame-Resizer version 4.2.2:
https://dealertile.com/
However, I cannot get a consistent sizing of the iFrame. To begin with, I have to use custom 'heightCalculationMethod' or the iFrame only renders to 150px height:
bodyOffset = 150px height.
bodyScroll = Correct initial height. Grows on page changes, but does not shrink.
documentElementOffset = 150px height.
documentElementScroll = Correct initial height. Grows on page changes, but does not shrink.
max = Correct initial height. Grows on page changes, but does not shrink.
min = 150px height.
grow = Correct initial height. Grows on page changes, but does not shrink.
lowestElement = Correct initial height. Grows on page changes, but does not shrink.
taggedElement = 0px height.
You can see my demo iFrame here: https://dealertile.com/demo/
Can someone help me figure out why the iFrame is not shrinking and only growing?
Problems like this always come down to a CSS bug, the most common issue is setting a percentage height on an element
Related
What does it mean when an element has a min-height but not a height?
div#single-post{
min-height:100px;
}
I just checked the site you gave and this is what I get
div#single-post
{
background-color: #FFFFFF;
padding-left: 20px;
padding-right: 20px;
}
There is no min-height for this id. Are you missing something?
Min-Height with no height would be the sidebar. Did you mean this???
If so, it is because it should still be there if there is no entry (otherwise, it would like dismiss and your site would look different), but it should also be able to expand if you are using a lot of modules or whatsoever
min-height sets a low-end threshold for the height of the element, but allows the content to control the height should the content exceed x px. Unlike the height property which doesn't allow the element to expand should content overfill the element set range.
min-width works in much the same way, except it does not allow content to dictate the width. Rather the minimum width is used to set limitations on how fluid page layouts resize when your browser window is adjusted. If you set min-width to 500px, the browser will not let your element shrink to less than 500px wide.
source: http://www.webmasterworld.com/forum83/5671.htm
So by using min-height in different areas of the site the user does not have to worry about content being missing or hidden by height restrictions as he/she can rest assured that the element will expand.
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 created a master page in asp.net which dont have any server side control as of now. I used div every where rather than table. There is not even a single Table right now in the page. Now When i tried to use that master page on other pages I found that div section that was holding the body content of the page is not expanding as the content is growing and content is overflowing on other sections.
Do we have any way to make div expandable with keeping minimum height fixed.
i.e. If the content is less than the minimum height set than regions should be shown with minimum height that was set else if content is more than minimum height then height starts growing with the page.
How can we do this.
This is my site where i want to make make about us and contact us page to be expandable.
You can find the css named style.css within the site.
By default a div will expand beyond the size specified using the min-height CSS property. My guess is that you are looking at the wrong thing as the cause of this issue. For your information IE6 I believe ignores the min-height property and will shrink to its content size even when the content size is smaller than the specified min-height.
UPDATE:
When you detect a browser with the problem mentioned above (i.e Internet Explorer 6) use JavaScript to measure the height of the wrapper DIV using it's offsetHeight and then subtract that value from what the min-height should be. If the value is positive then set the style.height value to the min height value.
Try this css:
div {
min-height: 100px;
overflow: hidden;
}
This overflow: hidden is a css-hack so to say. Maybe it helps you out here...
I have a layout with the following requirements
An image on the left side, and content on the right side.
The image is pinned to the bottom left of the viewport
The image does not move when the user scrolls
The image resizes to 100% height of the viewport, up to it's max height. (I don't want the image to distort in it's attempts to be larger than it actually is)
The image retains it's aspect ratio, and resizes it's width according to the height resizing.
The content begins to the right of the image, and moves as the image resizes with the browser viewport.
Now, I've managed to achieve pretty much all but the last of these requirements.
Have a look here:
http://letteringmusic.com/
The image resizes quite nicely, but I can't get the content to float next to the image because image is position:fixed, and therefore out of the document flow.
I'm not opposed to a javascript solution if that's the only way to get the result I want.
Anybody know what I need to do to make this work?
Thank you!!
A quick (and perhaps only) solution is to restyle the content when the browser window resizes (using the window.onresize event). In that function you should read the width of the background image:
var bgWidth = getElementById('background-img').style.width;
getElementById('content').style.left = bgWidth;
and use #content { position: absolute }. I know this introduces another problems, but I think you can bypass them. It's not the most neat solution, as Javascript must be enabled (and the event will be fired a lot when someone resizes this window), but it should work.
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.