gpt4 book ai didi

html - iframe 100% 高度在正文内,带内边距

转载 作者:技术小花猫 更新时间:2023-10-29 12:06:01 30 4
gpt4 key购买 nike

我的 HTML 文档中有一个 iframe,我遇到了一些麻烦。

我在页面顶部还有一个 URL 栏(固定位置元素),在用户滚动时应该与用户保持一致。那很好用。我希望 iframe 填充剩余空间但不被 URL 栏覆盖。

这就是我要说的。 http://s75582.gridserver.com/Ls

如何解决此问题,使 URL 栏不会覆盖页面的一部分?当我尝试在正文中设置填充时,它只会创建一个额外的、烦人的滚动条。

最佳答案

虽然您不能在 CSS 中说“高度:100% 减去一些像素”,但您可以使 iframe 100% 高,然后使用填充将其顶部向下推。然后,您可以利用 CSS3 box-sizing 属性使填充从高度中减去。

这个:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html><head>
<title>test</title>
<style type="text/css">
html, body { margin: 0; padding: 0; height: 100%; }
#bar { height: 32px; background: red; }
iframe {
position: absolute;
top: 0; left: 0; width: 100%; height: 100%;
border: none; padding-top: 32px;
box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
</style>
</head><body>
<iframe src="http://www.google.com/"></iframe>
<div id="bar">foo</div>
<body></html>

适用于 IE8、Moz、Op、Saf、Chrome。对于不支持框大小调整的浏览器(尤其是最多 7 的 IE),您必须继续使用 JavaScript 回退来使额外的滚动条消失。

关于html - iframe 100% 高度在正文内,带内边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1303729/

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