iframe size to fit in parent div_问答_开发者_运维开发者技术经验分享

开发者 https://www.devze.com 2023-01-20 09:48 出处：网络

I\'ve got the following html: <html> <body> <div id=\"note1\" class=\"note\"> <div class=\"note-header\">Note</div>

相关专题：css

I've got the following html:

    <html>
<body>

<div id="note1" class="note">
    <div class="note-header">Note</div>
    <div class="note-content"></div>
</div>

</body>
</html>

with css:

body {
    background-color:black
}
.note {
    width: 150px;
    height: 150px;
    background: #111111;
}
.note h4 {
    text-align: center;
}
.note-header {
    background: #0b3e6f;
  开发者_开发技巧  color: #f6f6f6;
    font-weight: bold;

}
.note-content {
    height: 100%;
    width: 100%;
}
.note-editor {
    width: 100%;
    height: 100%;
}

And javascript that adds iframe to div.note-content:

$(function() {
    $("#note1").resizable().draggable({handle: ".note-header"});
    $('#note1').children('.note-content').append('<iframe id="rte" class="note-editor" ></iframe>');
    $('#rte').contents().attr("designMode", "on");
});

The problem is that iframe size apears to be bigger then div.note-content size. Parent div is resizable. how can i make iframe fit in div.note-content? JSFiddle: http://jsfiddle.net/TTSMb/

The problem is that the iframe takes the size of the parent, of class note-content which takes the full size (width 100%, height 100%) of its parent note1. But note1 contains another div as well.

You need to change the height of the note-content.

WHy don't you specify a size on the iframe itself? That should most likely solve your issue here