iframe size to fit in parent div
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
加载中,请稍侯......
精彩评论