Question

我好像有一个看起来像这样的问题：

HTML：

<div id="content">

        <object id="Object" data="second.html"></object>

</div>

CSS：

#content {

    width: 75%;
    height: 100%;
    margin: auto;
    background-color: #EAEAEA;


    overflow:hidden;
    background-color: #FFFFFF;
    border-radius: 7px;
    border: 3px solid #7f7f7f;

}



#Object {

    width: 100%;
    height: 100%;
    overflow : hidden;

}

无论我做什么（将second.html文本更改为1行或100），div都保持相同的大小。

我尝试了不同的百分比和自动选项，唯一有用的是使用px对我来说没有选择（second.html高度变化）。

有谁知道为什么会这样或者如何解决这个问题？

编辑：我在尝试Raza Hussain's Tip时发现了一些有趣的内容出：

标签之间的文字行为正常 - ＆gt;没问题但是，如果我将相同的文本写入second.html（纯文本），我的问题又会出现。

Answer 1

您需要将html和body设置为height: 100%或设置非基于百分比的高度。

html, body {
    height: 100%;
    margin: 0; /*Reset Chrome defaults*/
}

https://jsfiddle.net/dyhtvojp/1/

Answer 2

您可以使用vh（视口高度）

height: 100vh;

Answer 3

<div id="content">
    <object id="Object" data="second.html">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis lectus metus, at posuere neque. Sed pharetra nibh eget orci convallis at posuere leo convallis. Sed blandit augue vitae augue scelerisque bibendum. Vivamus sit amet libero turpis, non venenatis urna. In blandit, odio convallis suscipit venenatis, ante ipsum cursus augue.</object>
</div>

#content {
    width: 75%;
    height: 100%;
    margin: auto;
    background-color: #EAEAEA;
    overflow:hidden;
    background-color: #FFFFFF;
    border-radius: 7px;
    border: 3px solid #7f7f7f;
}
#Object {
    width: 100%;
    height: 100%;
}


https://jsfiddle.net/joqyo9se/

<object> - 除静态值外，height属性不起作用

3 个答案: