How to make div under responsive rectangle fill width and height of screen?

Question

I have adjusted web-tiki's responsive square elements and I want to create a login screen.

On the login screen I want to use a header, and have the rest of the page fill the height and width of the screen precisely. It should look as follows filling the width and height:

End result as wished

Right now the code does not accomplishes this since the [FILL REST OF WIDTH AND HEIGHT WITH BACKGROUND IMAGE] part just resizes outside of my control.

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

I hope someone can help me make it fit in the screen.

Thanks.

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

can't you try a more general approach? something like this http://jsbin.com/fecofuzoje/1 — Nikunj Madhogaria, Dec 26 '14 at 13:21

Gildas.Tambo · Answer 1 · 2014-12-26T12:27:05.917

1

Use vw and vh Measurements do not forget 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');
}

edited Dec 26 '14 at 12:27

answered Dec 26 '14 at 12:17

Gildas.Tambo

20,147
7
44
72

Thanks, but it does not work. The image resizes and becomes smaller when adjusting the page size. – Erwin Rooijakkers Dec 26 '14 at 14:48
See http://jsfiddle.net/2shygbcy/2/ with your suggestion implemented and resize the screen. It should keep the screen filled. – Erwin Rooijakkers Dec 26 '14 at 15:06

score 1 · Answer 2 · answered Dec 26 '14 at 12:26

1

Hey check this is what you are expecting


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

answered Dec 26 '14 at 12:26

Naveen Kumar PG

500
3
17

Hmm I cannot get the image in the background here. Thanks. – Erwin Rooijakkers Dec 26 '14 at 14:54

Nikunj Madhogaria · Accepted Answer · 2014-12-26T13:23:33.033

1

I would recommend trying a more general approach.

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>

edited Dec 26 '14 at 13:23

answered Dec 26 '14 at 13:15

Nikunj Madhogaria

1,693
2
18
36

Thanks. Taking in mind that we have different heights on Mobile, Tablet and Desktop: how do I adjust according to screen height in: `height: 700px; /* adjust according to your screen height */`? – Erwin Rooijakkers Dec 26 '14 at 14:52
1

you can use various detection techniques for that and load specific css accordingly: check these posts on SO: http://stackoverflow.com/questions/15228937/php-check-if-the-page-run-on-mobile-or-desktop-browser http://stackoverflow.com/questions/14440296/reliable-way-to-detect-desktop-vs-mobile-browser http://stackoverflow.com/questions/4117555/simplest-way-to-detect-a-mobile-device http://stackoverflow.com/questions/6524301/detect-mobile-browser Hope this helps. – Nikunj Madhogaria Dec 26 '14 at 15:30
1

Thanks. I ended up using this approach and use some JavaScript to calculate the height like this: `$('#login').css({ height: ($(window).innerHeight() - $('#top').innerHeight()) });` – Erwin Rooijakkers Dec 26 '14 at 15:43

How to make div under responsive rectangle fill width and height of screen?

3 Answers3