我有一个带有 iframe 的页面，它呈现为信箱形状。我试图让它垂直填充页面。水平尺寸似乎没有问题(60% 带有左右侧边栏)。
我可以在 chrome 中使用它，但不能在 firefox 中使用。它需要无处不在(现代)。我也想避免使用 javascript。
css — 在 chrome 上工作，而不是在 firefox 上工作(我在某处读到这不应该工作(根据标准)，但为什么呢？:
iframe, .menu, .main{
height: 100%;
}
css — kludge:不独立于屏幕尺寸
iframe, .menu, .main{
height: 100em;
}
html
<!DOCTYPE HTML >
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="style/s.css"/>
</head>
<body>
<header>
<h1></h1>
</header>
<div class="group">
<div class="menu">
<iframe src="menu">
Your user agent does not support frames or is currently configured not to display frames. However, you may visit
<a href="menu">the index here</a>
</iframe>
</div>
<div class="main">
<iframe src="main">
Your user agent does not support frames or is currently configured not to display frames. However, you may visit
<a href="main">the content here</a>
</iframe>
</div>
<aside>
<p>hello side</p>
</aside>
</div>
<footer>
<p>hello footer</p>
</footer>
</body>
</html>
CSS
/*background colour*/
header,
.menu,
.main,
section,
aside,
footer {
background-color: #eee;
border: 1px solid #888;
}
/*layout*/
footer {
clear: both;
}
header,
footer {
padding: 0;
width: 100%;
}
.menu,
.main,
section
aside
footer {
padding: 0;
margin: 0;
}
body,
.group {
margin-top: 0;
margin-bottom: 0;
}
iframe {
width : 100%;
border: 0;
}
iframe, .menu, .main {
height: 100%;
}
.group:before,
.group:after {
content: "";
display: table;
}
.group:after {
clear: both;
}
.group {
clear: both;
*zoom: 1;
}
/*default*/
/*side at bottom on non wide screen*/
aside {
clear: both;
}
/*if wide enough put menu on left side*/
@media all and (min-width: 1040px) {
.menu {
width: 24.9%;
float: left;
}
.main,
section {
width: 75%;
float: left;
}
}
/*wide screen — all side by side*/
@media all and (min-width: 1200px) {
.menu {
width: 17%;
float: left
}
.main,
section {
width: 64%;
float: left;
}
aside {
width: 17%;
clear: none;
float: right;
}
}
最佳答案
现在终于可以使用 css 了。使用 vh(视口(viewport)高度):另请参见 vw、vmax、vmin。
请参见下面的示例，它还使用了新的 css 网格。 css flex 也应该可以工作。
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="iframe-layout-exp.css"/>
</head>
<body class="wrapper">
<header class="box">Header — this is a header</header>
<main>
<iframe src="http://bookmarkdb/">
What no iframes.
</iframe>
</main>
<nav class="box">
Menubar — This is a menu bar
</nav>
<aside class="box">Sidebar — this is a sidebar</aside>
<footer class="box">Footer — this is the footer</footer>
</body>
</html>
注意简单的html；没有额外的 div；它只是描述了页面的语义，所有元素都按照合理的顺序排列。
/*******************************/
/*Layout*/
nav {grid-area: sidebar; }
aside {grid-area: sidebar2;}
main {grid-area: content;}
header {grid-area: header;}
footer {grid-area: footer;}
html, body, .wrapper, main{
margin: 0;
padding: 0;
}
.wrapper {
height: 100vh;
}
.wrapper {
display: grid;
grid-gap: 10px;
grid-template-columns: 120px auto 120px;
grid-template-rows: min-content auto min-content;
grid-template-areas:
"header header header"
"sidebar content sidebar2"
"sidebar footer footer";
}
main {
display:grid;
}
/*******************************/
/*style*/
.box {
border-radius: 5px;
padding: 10px;
font-size: 150%;
}
header, footer {
background-color: #999;
}
nav, aside {
background-color: #ccc;
}
还有 CSS。
关于css - iframe填充页面，没有javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33532224/