Question

这是我的代码：

<style >
  html,body {
    height:100%;
    margin:0;  
    background:red;
  }
  #main {
    height:100%;
    background:yellow;
  }
  h1 {
      margin:0;
  }
</style>

<body >
 <div>
  <h1>Header</h1>
</div>
<div id="main">
   Adjust the height
</div>
</body>

我希望div main覆盖整个视口，而不会将屏幕进一步延伸到底部。使用上面的代码，会出现一个垂直滚动条，因为我们超出了视口高度。我怎么能迫使#main完全停在视口的底部？

Answer 1

你可以给File Navigator一个高度，并根据它来计算身体的高度。

<h1>

  html,
  body {
    height: 100%;
    margin: 0;
    background: red;
  }
  #main {
    height: calc(100% - 35px);
    background: yellow;
  }
  h1 {
    margin: 0;
    height: 35px;
  }

Answer 2

您可以使用flex来简化：

body {
  display: flex;
  flex-flow: column;
}
html,
body {
  height: 100%;
  margin: 0;
  background: red;
}
#main {
  background: yellow;
}
h1 {
  margin: 0;
}

<style>
  html,
  body {
    height: 100%;
    margin: 0;
    background: red;
  }
  #main {
    height: 100%;
    background: yellow;
    /* overflow:auto; depends on behavior expected when too much content */
  }
  h1 {
    margin: 0;
  }
</style>

<body>
  <div>
    <h1>Header within a div of any height </h1>
  </div>
  <div id="main">
    Adjust the height, should i scroll if too much content ? then add overflow:auto;
  </div>
</body>

Answer 3

你可以将.main设置为position：absolute;，然后使用bottom：0;左：0;右：0;将它伸展到四面。

html,body {
    height:100%;
    margin:0;  
    background:red;
}
  #main {
    position: absolute;
    bottom: 0;
    top: 30px;
    right: 0;
    left: 0;
    background:yellow;
  }
  h1 {
      margin:0;
  }

https://jsfiddle.net/841f9z5b/

Answer 4

使用视口单元，我们可以获得所需的div封面 html，body { 身高：100vh; 余量：0;
背景：红色; } #main { 身高：80vh; 背景：黄色;

        }
        h1 {
            margin:0;
          height:20vh;
        }

http://codepen.io/nagasai/pen/zBqQLq

Answer 5

您可以使用<style > html,body { height:100%; margin:0; background:red; } #main { height: calc(100% - 37px); /* Height of header subtracted*/ background:yellow; } h1 { margin:0; } </style> <body > <div> <h1>Header</h1> </div> <div id="main"> Adjust the height </div> </body>动态设置div高度。

这适用于IE9及更高版本（因此几乎涵盖所有现代浏览器）

＆＃13;

static  MediaPlayer intro;

 @Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_level_one);
    getReadyTimeText = (TextView) findViewById(R.id.levelonetimerText);

 public void OneGame(){
    intro = MediaPlayer.create(getApplicationContext(), R.raw.minicycleaudio);


}

＆＃13;

使div完全覆盖视口

5 个答案: