Question

使用AdminLTE。

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

以上代码拉伸对象宽度但不拉伸高度，高度尽可能小。

如何使其与窗口的高度相同？

Answer 1

使用css属性height: calc(100vh-100px)，其中100px是您的标题高度，例如

Answer 2

创建一个包含以下CSS Viewport Units: vw, vh, vmin and vmax的容器，然后您可以使用百分比来控制具有display:block属性的DOM元素：

.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/

Answer 3

如果我正确理解您的问题，问题出在默认的身体边距上，将身体的边距设置为0：

body{margin: 0px;}

Answer 4

您可以设置：

body{min-height: 100vh;}

Answer 5

只需使用以下样式：

html, body {
   height: 100%;}

HTML5对象适合窗口高度

5 个答案: