个人中心
文章发布
退出
作者热门文章
- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用？
- database - RESTful URI 是否应该公开数据库主键？
25
4
基本上我想要做的是在我的页面顶部有一个单一的、细长的工具栏，其中有一排不同的 DIV 容器作为按钮。我希望这些按钮更新工具栏下方 iframe 的内容。问题是我的工具栏下方的 iframe 高度只有 150px。特别是当我指定 <!DOCTYPE html> 时会发生这种情况，但是当我不指定此 HTML5 文档类型时，它工作正常。
我仔细阅读了一下，看起来像是 is that HTML5 no longer covers percentages to be able to set the width and height of an iFrame. 的原因但是现在我被卡住了，因为我无法让 iFrame 增长到工具栏下窗口剩余高度的 100%。我什至创建了一个 iframe_container DIV 并将 iframe 放入其中，iframe_container 位于 height=%100 但我仍然无法使其正常工作。
HTML:
<!DOCTYPE html>
<html>
<body>
<div class="header_bar">
<div class="tab_active" onclick="location.href='...'">Tab1</div>
<div class="tab_inactive" onclick="location.href='...'">Tab2</div>
<div class="tab_inactive" onclick="location.href='...'">Tab3</div>
</div>
<div class="iframe_container">
<iframe id="main_iframe" class="main_iframe" frameborder="0" src="...">
</iframe>
</div>
</body>
</html>
CSS:
.iframe_container {
width: 100%;
height: 100%;
}
.main_iframe {
width: 100%;
height: 100%;
}
.header_bar {
float: none;
width: 100%;
height: 30px;
}
.tab_inactive {
float: left;
}
.tab_active {
float: left;
}
我试过 iframe 的 seamless 属性，它似乎也没有帮助。到目前为止我发现的最佳选择是添加 {position: absolute; top: 30px; bottom: 0px;}到我的 iframe_container 类，它确实解决了 iframe 大小问题，但是它引入了一些非常奇怪的滚动行为，包括右侧的双滚动条。关于如何确保我的 iframe 填满窗口底部并仍然保持 HTML5 兼容的任何想法？谢谢
最佳答案
也许是这样的？
html { height:100% }
body { height:100%; width:100%; margin:0; display:table;}
.header_bar { display:table-row; }
.iframe_container { height:100%; display:table-cell; }
iframe { height:100%; width:100%; display:block; }
关于css - HTML5 iFrame 的高度只有 150px，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24961142/
25
4
0
我正在上 codeschool，他们告诉我: SORRY, TRY AGAIN transform must be defined last, after the browser prefix sty
我正在使用 SCSS 更改 bootstrap 4 的样式以创建我自己的样式，但是当我编译 SCSS 时出现此错误: { "status": 1, "file": "H:/!WEBSITE/m
在将作为 photoshop 文件给出的网页设计转换为 html+css 时，我对字体大小感到困惑。如下图所示，photoshop 中的 30 px 不等于其他 Windows 程序(Mac 或其他程
关闭。这个问题是opinion-based .它目前不接受答案。 想要改进这个问题？ 更新问题，以便 editing this post 可以用事实和引用来回答它. 关闭 6 年前。 Improve
在我当前的代码中，ul 一直放在页面底部，超过了我的预定义框。 我尝试使用 position:fixed 和 bottom:0 .box { width: 900px; height:
我在 photoshop 中有一个模型，其字体为 60px。我将浏览器中的字体设置为相同的 60px 大小，但浏览器中的字体较小。知道这是为什么吗？ 最佳答案 您在 Photoshop 中为您的文本启
我想知道是否有可能仅使用 CSS 获取页面的浏览器/视口(viewport)像素尺寸并将其显示在页面上(最好使用“内容”样式)。我正在为我的一个元素(完全用 CSS 构建)这样做。我知道使用 JS 很
我正在尝试将可变数量的像素计算为与密度无关的像素，反之亦然。 这个公式 (px to dp): dp = (int)(px/(displayMetrics.densityDpi/160)); 不适用于
我在一个带有 1px 边框的容器中有两个 div。我希望每个 div 按宽度正好占据容器的一半，所以我尝试使用 CSS3 的 calc函数从总宽度 (50%) 中减去预定的像素值(2px，div 的每
我正在使用 em 但在嵌套元素中遇到问题所以我决定使用 % 作为 yui建议。 To change the size of a font, always use percentages as the
我有一个元素容器。我想为容纳元素的容器设置最大高度，但如果元素没有填满整个尺寸，则让容器降低其高度。是否可以通过 CSS 实现？ 最佳答案 也许使用height: auto。请显示您的 CSS 和 H
我刚刚开始使用 sprites 来减少 HTTP 请求，我在将处理悬停动画的旧脚本转换到新系统时遇到了一些问题。我真的不想为每个按钮设置一个单独的功能，因为这很痛苦，尤其是按钮的数量，即使复制和粘贴也
我正在从头开始创建一个 HTML 页面，并在其中动态放置值，然后将其显示在 WebView 中。 我正在尝试在 WebView(作为 HTML)中复制 ActionBar(出现在应用程序的其他 Act
我希望“蓝色”容器始终为 70 像素高，而之前的“绿色”div 在使用 javascript 调整 div 大小时始终最大化可用高度。 我已经尝试了一段时间，但没有找到合适的解决方案。我们将不胜感激。
我在 Quora 上阅读了以下内容: By setting the font-size of the (which by default its 16px) to 62.5%, setting em
我在关于 http://developer.android.com/guide/practices/screens_support.html 的一些不幸的歧义中迷失了方向，而且我找不到澄清问题的 st
以前做移动端项目的时候都是用rem来做适配，现在基本上都是通过viewport单位来做。 postcss-px-to-viewport就是一个将px单位转换为视口单位的 (vw, vh, vmi
有什么区别: border-right: 1px dotted #CCCCCC; 和: border-right: 1 px dotted #CCCCCC; 有没有？ 第二个不正确吗？你需要在 px
我想创建(某种)全 Angular slider ，其中我有一个带有多个子部分的柔性包装器。每个部分100vw排成一排。现在我想每次单击按钮时都将 Flex-wrapper 的 margin-left
在这样的代码中: var a = e.clientX; var b = document.getElementById('someElement').style.left; var z = a - b
我是一名优秀的程序员,十分优秀！