0

I have that structure in my code. Height of my iframe is not fixed, it oscillate.

<div>
<iframe></iframe>
</div>

I want that the div height to be iframe height.

I thought in 

<div height=100%> .. </div>

but it doesnt works

Sorry for by bad English and Thanks!

My code:

<div style="position: relative;
  height:1000px;  ">

    <iframe frameborder="0"  scrollable="no" src="/driv.php" style="position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;"></iframe>

EDIT:

<div class="mydiv" style="position: relative;
height:1000px ">

    <iframe class="myif"frameborder="0"  scrollable="no" src="/pilotos2.php" style="position: absolute;
    top: 0; 
    left: 0;
    width: 100%;
    height: 100%;"></iframe>
    </div>
<script type="text/javascript" language="javascript"> 
$('.mydiv').css('height', $('.myif').height()+'px');
</script>

I tried that and doesnt works..

LigaVirtual F1
  • 77
  • 1
  • 3
  • 6

2 Answers2

0

You could do something like this

HTML

<div class="parent">
<iframe></iframe>
</div>

CSS

.parent{
   overflow: auto;
   float:left;
}

Edit: This will not work for iframes. Check here for solution: make iframe height dynamic based on content inside- JQUERY/Javascript

Community
  • 1
  • 1
c-bro
  • 486
  • 2
  • 13
  • Maybe because I wrote position: relative; also, because I need write that – LigaVirtual F1 Oct 04 '16 at 17:43
  • You also need to remove the fixed height declaration you have. This code will allow the parent div to have the same height and width as its children. What are you trying to achieve here? A width of 100% and the height the same as the child or the height and width the same as the child? – c-bro Oct 04 '16 at 17:43
  • I removed fixed height, I only wrote what you send and position:relative. Im trying that parent has 100% of the height of his children – LigaVirtual F1 Oct 04 '16 at 17:46
  • Okay, I was wrong. It appears this type of solution will not work for iframe (I tested it using one div inside of another). You're looking for something like this. http://stackoverflow.com/questions/9162933/make-iframe-height-dynamic-based-on-content-inside-jquery-javascript – c-bro Oct 04 '16 at 17:54
  • Or this http://stackoverflow.com/questions/7317781/how-to-set-iframe-size-dynamically – c-bro Oct 04 '16 at 17:55
0

If you want the outer div to inherit the height of the iframe, do not set a height on the div. It will automatically adjust to the height of the iframe. Try this by setting height=100px on the iframe.

Setting height:100%; on the div will only cause the div to expand the full height of it's parent.

Cayman Roe
  • 125
  • 10