iframe height "100% - X pixels" - javascript

I'd like to cut the bottom area of an external iframe that I want to include on my site, within this frame there are links that I cannot modify and if I click them I go to another page that has a different size from the original.
I'd like to do something like <iframe height:100%-20px /> (I know that there isn't a syntax like this but my goal is to reproduce that)
So, is there a way to hide tot pixels form the bottom of an iframe?

Take a look at the calc() function in css.
It's usable from IE10 onwards (IE9 is a bit shaky).
You can do this:
iframe{
height: calc(100% - 20px);
}
If 100% height was 100px, then it would come out as 80px (Excuse the simplicity, my math is horrible).
You can learn more by looking at this link: Uses for Calc()
Reference: CanIUse

How about this:
.outer {
width:300px;
height:290px;
overflow:hidden;
}
<div class="outer">
<iframe width="300" height="300"></iframe>
</div>
if this doesn't help do you have a link ?
You could play with the css of both the outer div and iframe with borders etc to make it look perfect

Here a live demo based on BeatAlex answer:
Demo: http://jsfiddle.net/a7y7V/

Related

stretching div across page does not work

I must be missing something very obvious but I'm simply trying:
<div style="width:100%;height:100%;background-color:gray">
bla
</div>
But the div does not stretch across the page.
See jsfiddle
Why does this not work and how can I make it work ?
Check this out https://jsfiddle.net/5o65ptcr/2/
Apply this CSS to HTML and Body:
html,body{
margin:0;
padding:0;
height:100%;
width:100%;
}
The problem is that the HTML and BODY tags have default margin (behaves like padding) applied to them in the user-agent stylesheet (the stylesheet that is built in to the browser).
UPDATE: Considering the question, I thought you meant the "entire width of the page" and not the entire height. I have updated my question to include both the entire width and entire height. Please be sure you explain your question accurately.
<div style="width:100%;height:100%;background-color:gray;position:absolute;top:0;left:0;">
bla
</div>
Divs are relative to their parents. So if the body element doesn't have height 100% also then the div can't stretch across the screen. You would have to position it absolute then it would stretch across the page as it's not longer restricted by it's parent and moved to it's own layer.
Give height:100%; to html and body.
body,
html
{
height: 100%;
padding: 0;
margin: 0;
}
Jsfiddle
Try substituting vw , vh css units for %
<div style="width:100vw;height:100vh;background-color:gray;">
bla
</div>
jsfiddle https://jsfiddle.net/4Ld4p68L/4/

Set the scrollable height of an entire page regardless of content?

Is there a way using css and html to control the maximum scrollable height of a page, regardless of the content which is present on the page?
For a concrete, hypothetical example: say the <body> is incredibly simple - a <div> which is 5000px tall. How would you set the scrollable height to be only 2000px?
Thus it would appear that the 2000th pixel is the last pixel on the page. The browser's scroll bar would appear to be at the bottom, not just "stuck" halfway down the page. Am I missing something simple to achieve this behavior? I would prefer pure css/html because it seems like it should be doable, but I would accept js.
You can do something like this
HTML
<div class="outer">
<div class="inner">
<!--your content here-->
</div>
</div>
CSS
.outer {
height:2000px;
overflow:auto;
}
.inner {
height:5000px;
overflow:hidden;
}
You should set the body height to a specific number and set overflow to hidden.
body{
height:2000px;
overflow:hidden;
}
Made an example here
Use max-height or height css properties and overflow:hidden on your container element. It will hide everything that is greater than the height you specify, therefore limiting the scrollbar height.
I should also mention that you can use overflow-y:hidden will achieve the same thing, but will only affect top and bottom edges of an element. See more details here.

How can I hide or color iframe scrollbar in Firefox and Internet Explorer?

How do I hide (and color) the iframe scrollbar in Firefox and Internet Explorer with css or Javascript? I am using height auto iframe content and it is working fine but scrollbar is showing (except in Chrome). I am using iframe height auto for cross domain height auto.
I recall having a similar issue a while back , depending on your needs
I would try using :
overflow-y:hidden;
in the css or the
scrolling="no"
inside the iframe element. ( This should work)
If all else fails , here's a little hack , set the parent div slightly smaller width than the child div and set its css like so:
.parent {
overflow-x:hidden;
width:486px;
height:300px;
}
.child {
width:500px;
height:auto;
}
Then to make it look even slightly better play with the css eg: set the border right and it will look as though you never did such a hack , but as i said before , try the scrolling="no" first , as this latter method would probably be frowned upon by some, however in my defense it is a solution to a problem.
Happy Coding.
If you have a script that's taking care of the height so you don't need to scroll, you can simply turn scrolling off so they're not there, getting in the way:
<iframe src="//www.abc.net.au/" scrolling="no" width="500" height="500"></iframe>
scrolling="no" does the trick.
Example: http://jsfiddle.net/rt2bf/

How would you make an iframe's height always extend to the bottom of the browser window?

I want to generate an iframe whose height will extend to the bottom of the browser window. If the user changes the height of the browser, then the iframe's height should change dynamically as well. However, I'd like for the iframe to have a minimum height past which it would not shrink any further. How would I do this?
I'm doing something very similar.
1) Get a hold of the window resize event (I am using jQuery)
$(window).resize(function(){});
2) Pop in what you want your actions to be. For me I was setting a height explicitly on the body of the document so my CSS of height:100% on an inner container would take hold. You could do anything within the function:
$(window).resize(function(){
$('body').height($(document).height());
});
My markup :
<html>
<body>
<div class="full-height">Hello World</div>
</body>
</html>
My CSS :
body {position:relative;}
.full-height {height:100%;}
It would help to see what you're working with, but this will hopefully point you in the right direction.
iframe {
height:100%;
min-height:300px;
}
have you tried putting the iframe inside a wrapper div
<div id="iframediv" style="min-height:500; overflow:scroll">
<iframe src="http://google.com">­ </iframe>
</div>
It's worth a shot.

jquery mobile, images have a small black border around them

I'm using jquery mobile, and I have a image that I would like to fit the screen from right to left, with no gaps. However, if I just put the image without doing anything to it like <img src="image.png />", it turns out with a small black border around it. This stays despite me setting width=100% in the css. How can I remove this border?
Adding some code:
<div data-role="content" style="background-color: #000000">
<div id="slogandiv">
<img src="slogan.jpg" id="slogan" width="100%" height="45%"/>
</div>
I just did this. It is because that the data-role = "content" has a automated padding of 15px.
I went into the .css file and removed this. search for ui-content. remember in the ui-content, listview, that it has -15 so change this to 0 aswell.
A CSS directive of width: 100% for your image simply means that the browser should display the image at its actual size (if it can), it won't stretch it to some other size. This may explain why you have a slight border around it, as the image doesn't quite scale to the full width of the viewport. You could try tinkering with the img tag's margin and padding settings, but I suspect the approach that will work best for you is to display the image a different way.
Have you tried manipulating the CSS of the containing element? Say you have a paragraph class called .container. You could do something like this:
.container {
background: url('image.png') no-repeat;
background-size: contain;
width: 480px;
height: 240px
}
… this will use your image as before, but this time the background-size attribute of contain will force it to fill the dimensions of the parent element (the height and width of which we have defined above).
background-size is new in CSS3 and therefore not uniformly-supported, but it's in WebKit and several other browsers. Read more: A List Apart: Supersize that Background, Please!

Categories