iframe來填充頁面，沒有javascript

我有一個iframe的頁面，它呈現爲信箱形。我試圖讓它垂直填充頁面。水平尺寸似乎沒有問題（60％左右有側邊欄）。iframe來填充頁面，沒有javascript

我已經得到它在鉻，但不是Firefox的工作。它需要到處工作（現代）。我也想避免JavaScript。

CSS - 工作的鉻，而不是火狐（我讀的地方，（根據標準），這不應該工作，但是爲什麼？：

iframe, .menu, .main{ 
    height: 100%; 
}

CSS - 雜牌：不獨立的屏幕尺寸

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

來源

2015-11-04 ctrl-alt-delor

現在添加的代碼。 –

哇...恩：不要在'nav'元素中放入'iframe'元素;也沒有菜單元素這樣的東西。無論你正在閱讀什麼教程...停止。使用Mozilla開發者網絡，這是一個很好的起點：https：//developer.mozilla.org/en-US/docs/Web/HTML/Element你也沒有理由使用iframe元素進行導航，可能會讓你陷入Google serps中。 – John

@john你能解釋一下嗎（我得到了關於菜單的一點，所以我刪除了菜單標籤，以防它尚未實現：mozila網站說它是實驗性的） –

最後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。

來源

2017-10-10 10:34:11

iframe來填充頁面，沒有javascript

回答

相關問題