gpt4 book ai didi

html - CSS 规则调整 iframe 宽度但不调整高度

转载 作者:行者123 更新时间:2023-11-28 06:06:02 27 4
gpt4 key购买 nike

我有一个 index.html 标记如下:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<link type="text/css" rel="stylesheet" href="Styles/main.css">
</head>
<body>
<header>...</header>
<iframe id="pagecontent" src="content.html"></iframe>
<footer>...</footer>
</body>
</html>

要应用样式,我使用 main.css 其内容如下:

 #pagecontent {
border: none;
height: 100%;
width: 100%;
}

iframe 的宽度分配正确。也就是说,当我调整浏览器窗口大小时,iframe 的宽度也会相应调整。但是,高度始终相同。它约为 300px,不会扩展到浏览器窗口的高度。我在 FF 45 和 IE 11 中试过这个。

问题:应用到iframe时高度和宽度的调整方式不一样是什么原因?

最佳答案

您已将高度设置为 100%,但 100% 是什么?它始终是该元素的父元素,那么父元素的高度设置为多少?如果它没有设置任何内容,那么浏览器就没有任何可引用的内容。

所以你必须在这里以 px 为单位给出高度

#pagecontent {
border: none;
height: 400px;
width: 100%;
}

工作示例:https://jsfiddle.net/uxq4pzc1/

关于html - CSS 规则调整 iframe 宽度但不调整高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36446868/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com