HTML5对象适合窗口高度

Question

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

The above code stretches the object width but not the height, the height is as small as possible.

How can I make it the same height as the window?

Answer 1

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

Answer 2

create a container with the following CSS Viewport Units: vw, vh, vmin and vmax then you can use percentage to control DOM elements with display:block property:

.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

Just use the style below:

html, body {
   height: 100%;}