Question

我有一个带有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; 
    }
}

Answer 1

最后css现在允许这个。使用vh（视口高度）：另请参阅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。

iframe填充页面，没有javascript

1 个答案: