Question

我有以下html：

    <html>
<body>

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

</body>
</html>

用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%;
}

将iframe添加到div.note-content：

的javascript

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

问题是iframe大小比div.note-content size更大。父div可以调整大小。如何让iframe适合div.note-content？ JSFiddle：http://jsfiddle.net/TTSMb/

Answer 1

问题在于iframe采用了父类note-content的父类的大小，它取其父note1的完整大小（宽度100％，高度100％）。但note1也包含另一个div。

您需要更改音符内容的高度。

Answer 2

为什么不指定iframe本身的大小？这应该最有可能解决你的问题

iframe大小适合父div

2 个答案: