如何在响应矩形填充屏幕的宽度和高度下制作div？

Question

我已经调整了web的响应方元，我想创建一个登录屏幕。

在登录屏幕上，我想使用一个标题，让页面的其余部分精确地填充屏幕的高度和宽度。它应该如下所示，填充宽度和高度：

​

​

现在，代码没有完成这一点，因为使用背景图像部分填充宽度和高度的剩余部分只是在我的控制范围之外调整大小。

HTML：

<div id="top">
    <h1>My header</h1>
</div>

<!-- Fixed main screen -->
<div id="login-screen" class="bg imgloginscreen">
    <div class="content rs">
        <div class="float-left">Some text, blabla</div>
        <div class="float-right">
            <form>
                <input type="text" value="Username"/><br/>
                <button type="submit">Login </button>
            </form>
        </div>
    </div>
</div>

CSS：

/* Responsive square elements stylesheet is adjusted from http://jsfiddle.net/webtiki/MpXYr/3/light/ which was designed by http://web-tiki.com/ */

#top {
    clear: both;
    margin: 0.25%;
    width: 99.5%%;
    padding: 0.1%;
    background-color: #000;
    color: #fff;
}
.imgloginscreen {
    background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG');
}
.content {
    position: absolute;
    height: 90%; /* = 100% - 2*5% padding */
    width: 90%; /* = 100% - 2*5% padding */
    padding: 5%;
}
/*  For responsive images */
.content .rs {
    width: auto;
    height: auto;
    max-height: 90%;
    max-width: 100%;
}
.float-left {
    float: left;
}
.float-right {
    float: right;
}
/* Not sure how to make it fill the rest of screen? */
#login-screen {
    float: left;
    position: relative;
    height: 99.5%;
    width: 99.5%;
    padding-bottom: 50%;
    margin: 0.25%;
    overflow: hidden;
    background-color: #1E1E1E;
}

body {
    font-family: 'Lato',verdana, sans-serif;
    font-size: 20px;
    color: #fff;
    text-align: center;
    background: #ECECEC;
    margin: 0;
}

我希望有人能帮我把它放到屏幕上。

谢谢。

JSFiddle：http://jsfiddle.net/2shygbcy/2/

Answer 1

我建议尝试一种更普遍的方法。

HTML & CSS

​

body {
  margin: 0;
  height: 700px;  /* adjust according to your screen height */
  overflow-y: hidden;
}
#header {
  background: #000;
  color: #fff;
  text-align: center;
  padding: 10px 0;
}
#content {
  height: 100%;
  background: #1E1E1E;
  padding-top: 20px;
  text-align: center;
}
input[type="submit"] {
  margin-top: 10px;
}

<div id="header">
  <h1>My Header</h1>
</div>
<div id="content">
  <input type="text" placeholder="username" />
  <br/>
  <input type="submit" value="Login" />
</div>

​

Answer 2

使用vw和vh测量不要忘记box-sizing - CSS

*{box-sizing: border-box; padding: 0; margin: 0}
.imgloginscreen {
    width: 100wv;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    background-image: url('http://upload.wikimedia.org/wikipedia/en/3/37/Leaves.JPG');
}