I want to show a top bar on my page with height 72 pixels height and then load an iframe beneath which fills the full page (minus height of the topbar).
Before I can even start to take my topbar into account...somehow my iframe ignores any height attribute I set to it:
width='100%' height='1200' style='overflow:hidden;height:100%;width:100%'
or
width='100%' height='100%' style='overflow:hidden;height:100%;width:100%'
I have been reading this post: Full-screen iframe with a height of 100%
But no luck. See it live here: http://www.trouwlocaties.com/extpage.aspx?id=315&t=1
Try the first removing height:100% from the style, now the iframe should be 1200px of height.
Related
i use davidjbradshaw/iframe-resizer to resize an iframe, everything is ok with CORS but i face a problem, when i resize the window from fullscreen the iframe height gets a different content height which is ok, but when i return back to fullscreen "heightCalculationMethod: 'documentElementScroll'", document content scrollheight uses the height of previous window which the content has bigger height and creates a space, that space is part of the iframe, eg. the iframe height is 900px, but the iframe content height is 800px, which is repsonsive and what i want!
Thanks in advance!
$('iframe').iFrameResize({
autoResize: true,
checkOrigin: false,
heightCalculationMethod: 'documentElementScroll',
sizeHeight: true,
log: true
});
Changed iframe content's body height from 100% to auto and fixed it.
I have an iFrame as follow:
<iframe id="rffd74891-556d-4b13-bb19-5b486db41ec4" src="/DGS.DGSAPI.UI/ReportViewerWebForm.aspx" style="height: 483px; width: 1466px;"></iframe>
I have specified height and width already but if the content is larger than that, it expands and show scrolls. What can be done to make the content fit into a specified size so it doesn't create scrolls?
Actually it increases the width at runtime of iFrame. How can I force it load within say width of 500px and not change iframe's width as it loads content?
I have a container that contains 2 divs a transparent background color that sits on top of the video tag, the video should be full screen width 100% (height does not matter)
For some reason the transparent div is overlapping the video container height slightly (on the bottom) as seen here:
http://jsfiddle.net/v3vLq0nv/
This does not happen for an image tag, note for this example I have used an embedded youtube iframe as it has the same problem as the tag.
If I set a height on the parent container then it works fine, but setting a fixed height for the parent container makes the video not full width anymore.
The only thing I found that does work is actually change the HTML5 declaration from:
<!DOCTYPE html>
to
<!DOCTYPE>
Which I guess means it's HTML5 anymore which is not a great solution.
Note doing this in jsfiddle will not make it work as jsfiddle itself will put the declaration back in the frame "!DOCTYPE html"
I think the best two options here are:
#videoContainer { height:150px; }
or
#videoContainer iframe { float:left; }
They will both solve your problem.
Add display:block; to iframe :)
I have a similar problem as Stackoverflow.com web site has. The problem is width a banner above the content or body of the web site. I want to be able to reduce the width of the browser page but keep the size of the banner no matter what resolution is running the browser.
Example, if you reduce the width of this page you will see that a scroll bar will appear so you can move the page to the right and see the content hide. However, if you look at the banner the banner will have the new width that was reduced the page.
If i understand correctly may be you can define min-width in to the body. Write like this:
body{
min-width:975px;
}
It's mostly happened when the element have auto width & his parent didn't have any width define.
I have set up a google map on my wordpress site here:
http://drummersdatabase.com/map/ (currently set to 500px height as a temp workaround)
I have managed to get the map to span 100% of the width but not the remaining height. I basically want to make sure there are no scrollbars regardless of the user's resolution.
When I set the map height and/or it's containing div css (class="gridfull") 100%; it seems to interpret this as 100px instead.
Any ideas how I can fix this?
Thanks,
Dave
WHen you're asking your map to be height 100% it doesn't know what to be height 100% of.
If you set your HTML and BODY tags to be height 100% that gives you a starting point.
Then if you only had the map on the page and told it to be height 100% then it would indeed fill 100% of the height of the page.
However you have a header and a footer which also take up space so in order to do what you want to do you'd have to set the header and the footer to be percentage based heights too.
Have a look at the fiddle to see what I'm talking about:
http://fiddle.jshell.net/Mm3TT/
The only other way I can think to do it would be using javascript to work out the height of the users browser then subtracting the height of the header and footer from that and setting the height of the map to be whatever is left.