html - 如何治疗
问题描述
I have a header that also include dropdown on the file "header.html" with the size 1024x180px. As I would like to use this header for many of the pages later on, I would like to have the header on a separate file and import it later.
Now, in a webpage, I import my header by iframe like this<iframe style="border-width:0px; width: 1024px; height: 180px"src="common/header.html"></iframe>
. I try to set iframe with the size of the header (1024x180). This is enough in the normal circumstance when there is no dropdown. However, when the dropdown is appeared, it is obvious that there is not enough space, and thus, the iframe put the scrolling to see the additional dropping information
I have tried to add the properties overflow:visible in style but it seems to not working add all. In fact, all of overflow properties are not working as no matter what settings it is set (as still require scrolling to see additional contents). The common setting "scrolling= no" is not solved either, as it just simply turn off the scrolling.
Of course, I can set the height to a big number to compensate the height need if there is a dropdown, but that also leave a lot of space reserved for it. What I want is that while in normal case, the header is not overlap with other object but if there is a dropdown, it is acceptable that it overlaps with other element below. This is possible if the header is written in the current HTML file, but not by iframe import currently. And lastly, I don't want to change position of other HTML element, as I don't want to carry to much settings to multiple pages.
My question is how to treat the iframe as it is was a normal object (or in my case a normal header)? If it is not possible, what is other kind of imports I can use (that only involve HTML, or at most, JavaScript)
解决方案
您正在寻找的东西可以通过 iframe 实现,但您不应该这样做。据我了解,您希望创建一个头文件作为 html 文件,然后将其复制到每一页。正如您所发现的,其中一个问题是 iframe 不能溢出。这意味着任何需要“弹出” iframe 的内容都应包含在父 html 页面中,并且 iframe 应向父级发送 javascript 指令,说明应打开/关闭哪个弹出窗口。
解决这个服务器端会好得多。例如,在 php 中,您可以创建一个header.php
文件,并且对于每个模板文件(例如shop.php
, home.php
),您只需在顶部包含头文件,如下所示:
<?php include('header.php'); ?>
推荐阅读
- sql - 存储在字符串中的 OPENQUERY 查询因 EXEC 而失败
- r - 根据 R 中另一列的 < 或 >= 数值创建非数值列
- php - 我可以在父构造函数中将对象动态转换为特定的子类吗?
- twig - ModuleNode 是否始终是 Twig 节点层次结构中的顶级节点?
- python - autopytoexe 和 Google 表格 UnknownApiNameOrVersion:名称:表格版本:v4
- c# - 高效查询多张表c#linq
- flutter - 如果存在 Dart 从字符串中删除第一个逗号
- acumatica - 从一个自定义字段到另一个自定义字段的 Acumatica 数据
- org-mode - 如何通过(ox-)hugo并排导出文本以在组织模式之外进行比较
- linux - 如何更改第二个 SSD 上新分区的路径?