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

Erwin Rooijakkers 发表于 Dev

欧文（Erwin Rooijakkers）

我已经调整了web-tiki的响应式方形元素，并且想要创建一个登录屏幕。

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

最终结果如愿

现在，该代码无法完成此操作，因为[使用背景图像填充宽度和高度其余部分]只是在我的控制范围之外调整了大小。

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/

尼古丁·马多加里亚

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

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。