'm建立一個網站，我有一個頂尖的酒吧，堅持屏幕的頂部，然後下面我有一個iframe，就這些。問題如下，我的頂欄是50px高度，我想iFrame是100％-50px。有沒有辦法在CSS中做到這一點？如果不是，你會如何使用JavaScript？（我不知道獲得窗口大小的函數）。HTML/CSS Heigth 100％和px

| ------------- top bar ------------- | 50px
| _ __ _ __ _ __ _ __ _ __ _ __ _ ___ | 100％-50px
\ IFRAME
\ IFRAME
\
\
\
\

來源

2013-07-05 Jo Colina

申請「的margin-top」或「位置：親屬;頂部：some_value_」幀 –

所以，你有什麼關於您收到的4個答案的問題？ – iConnor

檢查我的編輯，我完全忘了'box-sizing' –

有沒有必要的JavaScript。使iframe高度達到100％;並在頂部添加填充以抵消頂部欄。

iframe{ padding-top:50px; height:100%; 
      box-sizing:border-box; moz-box-sizing:border-box }

關鍵屬性是box-sizing。使得元素高度100%的功能與其設想的一樣，但其他任何填充只會根據填充的方式添加到高度或寬度的大小。但是如果您製作box-sizingborder-box，則這會強制瀏覽器不會添加到高度或寬度，而是從高度或寬度取或減（即'100％-50px'）。

這麼長的故事簡短，box-sizing是你的CSS中缺少的功能。 對於JavaScript沒有必要，這只是矯枉過正。

注：這適用於所有的瀏覽器

來源

2013-07-05 17:14:00

，然後令人討厭的滾動條彈出到我們美麗的網站。 -_- –

無關緊要，他想要的效果，由於iframe上的填充，其中的任何內容都不會被頂部欄重疊 –

謝謝！它的工作，我只需要填充底部而不是頂部！ –

有一種方法！

使用此功能在CSS：min-height: calc(100% - 50px);

的min-height這裏會做的伎倆。如果沒有這個min它將把它作爲max-height並將而不是擴大其高度，直到其內容達到100% - 50px。

Fiddle.

來源

2013-07-05 17:11:02

這不適用於IE 8或更早版本，Safari 6或更早版本... https://developer.mozilla.org/zh-CN/docs/Web/CSS/calc –

你不希望它成爲'max-height'以及^ – iConnor

使用此： -

#iframeid{ 
height: -moz-calc(100% - 50px); 
height: -webkit-calc(100% - 50px); 
height: calc(100% - 50px); 
}

來源

2013-07-05 17:12:12

爲什麼你複製了？ –

我沒有。只需比較你的代碼與我的。 –

你應該注意到，這在IE 8或更早版本中不起作用 –

給你的iframe中的CSS填充頂：50px的

這樣

iframe { 
    padding-top:50px; 
}

或者你可以給你的iframe一個類並定義填充頂部：50px;在那裏

來源

2013-07-05 17:12:22 MaxK

您可以box-sizing和padding

這裏就是我想出了

<div id="top-bar"></div> 
<iframe src="http://www.jsfiddle.net" frameborder="0"></iframe> 

*{ 
    box-sizing:border-box; // box sizing allows us to add 50px padding to the iframe 
    -webkit-box-sizing: border-box; // Without effecting the size 
    -moz-box-sizing: border-box; 
    margin:0; 
} 

#top-bar{ 
    height:50px; // Height of top bar 
    position:fixed; // Fixed 
    background:skyblue; 
    top:0; 
    left:0; 
    right:0; 
} 

iframe{ 
    padding-top:50px; // Height of top bar 
    height:100%; 
    width:100%; 
    margin:0; 
} 

body, html{ 
    height:100%; 
    width:100%; 
    overflow:hidden; // There was like 10px of empty overflow at the bottom 
    // i will find out why 
}

Demo

給我一個這樣做幾分鐘就能解釋一切。

這是我能想到的，將在IE8的唯一方法+ 否則，它的JavaScript

來源

2013-07-05 17:22:25 iConnor

HTML/CSS Heigth 100％和px

回答

Demo

相關問題