2017-01-24 62 views
1

使用AdminLTE。HTML5對象適合窗口高度

<object id="topo" data="http://www.web-source.net" type="text/html" width="100%" height="100%" style="min-height: 100%;"><p>This is the fallback code!</p></object> 

上面的代碼伸展對象的寬度,但不是高度,高度儘可能小。

我怎樣才能使它與窗戶的高度相同?

+0

什麼是容器元素的高度?請提供小提琴。 – GMaiolo

+0

我不知道如何使用工作小提琴它不起作用。 – Rosenberg

+1

你可以通過'height:100vh獲得窗口高度;'css屬性 – Kejt

回答

1

使用CSS屬性height: calc(100vh-100px)其中100px是表頭高度,例如

0

如果我正確理解您的問題,這個問題是默認的身體保證金,定身的保證金,以0:

body{margin: 0px;} 
+0

我已經設置好了,'html,body {height:100%;寬度:100%; margin:0px; }' – Rosenberg

+0

所以我一定誤會了,使用你給出的代碼,它對我來說工作得很好。 –

0

您可以設置此:

body{min-height: 100vh;} 
0

只需使用以下樣式:

html, body { 
    height: 100%;} 
1

創建具有以下CSS Viewport Units: vw, vh, vmin and vmax的容器,那麼你可以用百分比來控制DOM元素與display:block屬性:

.container { 
    height: 90vh; 
    background-color: #ccc; 
} 

object { 
    border: 1px solid red; 
    display: block; 
    height: 80%; 
} 

object > p { 
    background-color: #fff; 
    height: 50%; 
    padding: 10px; 
    margin:0; 
} 
<div class="container"> 
    <object id="topo" data="http://www.web-source.net" type="text/html" width="100%" height="100%" style="min-height: 100%;"> 
    <p>This is the fallback code!</p> 
    </object> 
</div> 

https://jsfiddle.net/eapo/ba2cnc9r/