gpt4 book ai didi

html iframe 没有到达窗口底部

转载 作者:可可西里 更新时间:2023-11-01 13:00:34 25 4
gpt4 key购买 nike

我正在尝试创建一个包含三个水平部分的网页 - 标题、菜单和内容部分。我的问题是,当我这样做时,底部的 iframe 不会靠近浏览器窗口的底部。我想知道是否有人可以告诉我我做错了什么。我的 HTML 看起来像:

<!DOCTYPE html>
<html>
<head>
<style> </style>
</head>
<body>
<iframe src="title.htm" width="100%" height=90
style=" position:absolute;
top:0; left:0;
border:1px solid grey;"
name="title_frame">
<p>Your browser does not support iframes</p>
</iframe>
<iframe src="hmenu.htm" width="100%" height=70
style=" position:absolute;
top:90px;
left:0;
border:1px solid grey;
margin:0px 0px 0px 0px;"
name="hmenu_frame">
</iframe>
<iframe src="startpage.htm" width="100%" height="100%"
style=" position:relative;
top:160px;
vertical-align:bottom;
border:1px solid grey;"
name="content_frame">
</iframe>
</body>
</html>

没有 CSS 包含。我正在使用 Chrome 进行预览,最后一个 iframe 的底部大约在窗口的中间位置。我试过使用绝对位置,调整高度,并尝试过垂直对齐:底部,但似乎都不起作用。

最佳答案

这是一个使用 display: flex; 的简单解决方案和 <section>标签而不是 iframe。宽度 flex-direction: column;您确保您的内容部分显示在彼此之上,而不是连续显示。

这样一来,您就不需要进行所有定位,并且您的标记和样式都保持干净和简单。

html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
flex-direction: column;
}
section {
width: 100%;
box-sizing: border-box;
border: 1px solid grey;
}
.title {
height: 90px;
}
.hmenu {
height: 70px;
}
.content {
height: 100%;
}
<section class="title">...</section>
<section class="hmenu">...</section>
<section class="content">...</section>

关于html iframe 没有到达窗口底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40342224/

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