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

Question

我已调整web-tiki's responsive square elements ，我想创建一个登录屏幕。

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

现在代码没有完成这个，因为[填充宽度和背景图像的高度]部分只是在我的控制之外调整大小。

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

使用vw and vh Measurements不要忘记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');
}

Answer 2

嘿，检查这是你期待的

    http://jsfiddle.net/2shygbcy/1/

Answer 3

我建议尝试更通用的方法。

HTML ＆amp;的 CSS ：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;