Question

我正在尝试创建一个包含三个水平部分的网页 - 标题，菜单和内容部分。我的问题是，当我这样做时，底部的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的底部大约在窗口的一半。我尝试过使用绝对位置，玩高度，尝试垂直对齐：底部，但似乎都没有。

Answer 1

以下是使用display: flex;和<section>代码而不是iframe的简单解决方案。您确保宽度flex-direction: column;，您的内容部分显示在彼此之上，而不是连续显示。

这样，你就不需要你正在做的所有定位，你的标记以及你的风格仍然简洁明了。

＆＃13;

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%;
}

＆＃13;

<section class="title">...</section>
<section class="hmenu">...</section>
<section class="content">...</section>

＆＃13;

Answer 2

我建议改变你的方法。这可以使用flexbox轻松实现。请注意，不建议在您的上下文中使用iframes。您可以在this fiddle。

中查看最终结果

首先，从relative中移除absolute和iframe定位。他们不需要。接下来，在display: flex; flex-direction: column;上设置body。由于您正在设置边框（并且因为它可以为您节省很多麻烦），因此请在box-sizing: border-box;上添加iframe。

html, body {  
  height: 100%;
  padding: 0;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

iframe {
  box-sizing: border-box;
}

html iframe没有到达窗口的底部

2 个答案: