Geek asks and answers

Iframe will not be an absolute position

Is it possible to fully position an iframe? I can position the top and left, but not the bottom and right. I need to do all 4 sides.

HTML

<iframe src="http://apple.com/" id="myframe"></iframe>

CSS

#myframe {
  position: absolute;
  top: 40px;
  left: 40px;
  right: 40px;
  bottom: 40px;
}

view fiddle

+5
source share
3 answers

This is just an idea, I wrapped mine <iframe>with help <div>, look here: jsfiddle.net/bTrfD/1/

<div>
  <iframe src="http://apple.com/" id="myframe"></iframe>
</div>
+6
source

Its kind of hacking and its untested, but try

#myframe {
  position:absolute;
  top:40px;
  left:40px;
  width:100%;
}

then add "padding-bottom: 40px; padding-right: 40px" to the parent

EDIT

CSS Validated

div{
    padding:40px;
    position:absolute;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
}
iframe{
    height:100%;
    width:100%;
}

HTML

<div><iframe></iframe></div>
0
source

css

: http://jsfiddle.net/krish/bTrfD/2/

    width:270px;
    height:150px;
    position:absolute;
    left:50%;
    top:50%;
    margin:-75px 0 0 -135px;
0

More articles:


All Articles