How to place the block on the top of "second" screen using CSS?

Question

Problem: I have the page, where first screen (regardless of the screen resolution) is completely taken by block with beautiful background and "Sign up" button at the very bottom of this block JSFiddle (it's only for mobile version of the site, but it doesn't matter in this case)

<div class="first-screen"> 
    <div class="about">
        <h1>Motto</h1>
        <a href="#" class="btn btn-primary btn-block">Click here</a>
    </div>
</div>

.first-screen {
    position: absolute;
    top: 55px;
    right: 0;
    bottom: 0;
    left: 0;
    background: url('http://placehold.it/1000x1000&text=first screen') transparent no-repeat;
    background-size: 100% 100%;
    padding: 0;
    margin: 0;      
}

Task: I need other content on the page to be displayed right after the first screen (right now it is under the .first-screen because of position: absolute;);

Challenge: I need this task to be solved without any JS (I can solve it using js, but I don't want to).

Any working solutions (using display: table, table-row, table-cell;, flexboxes etc.) or any suggestions will be appreciated.

Note: it can be hacked with setting the margin-top for the .second-screen, but it isn't bulletproof at all.

Thanks in advance!

This question sounds like you have tried to bring other people on some homework assignment you've been given. Is there a good reason why you don't want to use JS? — David Moritz, Jun 10 '14 at 19:31
This comment sounds like you have nothing to say on the merits. I've asked for help after hours trying, wasn't stackoverflow made for this? Regarding your question - I don't want to write hacks until I'm 100% sure it can't be avoided. — eawer, Jun 10 '14 at 19:37
Can the styles of .first-screen be manipulated? or does that have to stay exactly as is? — Steve, Jun 10 '14 at 19:39
@Steve yep, all styles can be updated, as long as .first-screen takes all the first screen — eawer, Jun 10 '14 at 19:41
@MarioJVargas I've tried to use `display: table`, margin-top: 100% (on large part of mobile devices it looks good, but it's unreliable because usage of block's width in calculating percents), played with 'positions:', spent some time thinking about how flexbox can be used (came to nothing), glanced at new units (as suggested below) — eawer, Jun 10 '14 at 20:12

score 1 · Answer 1 · edited May 23 '17 at 12:22

1

So doing a little research came up with this:

https://stackoverflow.com/a/16837667/1192506

which then led me to use the vh height percentage.

example: http://jsfiddle.net/tXpj7/3/

EDIT

Taking the accepted example from that answer using 100% height html, body and then manipulating the heights of the navbar and the first screen. you get the same kind of result.

http://jsfiddle.net/tXpj7/6/

edited May 23 '17 at 12:22

Community

1
1

answered Jun 10 '14 at 19:56

Steve

547
5
19

yeah, I've considered using vh, but new units have really bad support on mobile (not to tell it looks broken on my pc) ![screenshot](http://snag.gy/l7971.jpg) But this might help someone – eawer Jun 10 '14 at 20:06
I came to the similar solution (based on navbar height, which is pretty static) – eawer Jun 11 '14 at 09:47

score 0 · Accepted Answer · answered Jun 11 '14 at 09:56

Considering navbar height is a constant I came to such solution - http://jsfiddle.net/EPFq7/1/

At first we should set html and body heights to 100%:

html,body{
    height:100%;
}

Then we remove navbar bottom margin:

.navbar {
    margin-bottom: 0;
}

And the key part is to add such styles to the .first-screen (where 52px is the height of the navbar):

.first-screen {
    height:100%;
    box-sizing: padding-box;
    padding: 52px 0 0;
    margin: -52px 0 0;     
}

How to place the block on the top of "second" screen using CSS?

2 Answers2