1

How can I have my first div always be full-screen (of the browser not computer), and then supporting divs show underneath.

I want to replicate the layout of this site http://checklandkindleysides.com

In the simplest form, I just want:

  • First section to be full height and width of window
  • Supporting content to be a specific size and not full-screen

Thanks

O. Eliel
  • 43
  • 1
  • 6
  • Good browsers provide in-built tools for analyzing the HTML elements and associated CSS – Glen Thomas Mar 30 '16 at 23:25
  • I know but I am a beginner and find their code quite hard to understand. I just want it simplified without all their extra code – O. Eliel Mar 30 '16 at 23:26

1 Answers1

1

You need to give the html, body and full height div a height of 100%.

CSS

html,
body {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.full-height-content {
  height: 100%;
  overflow-y: auto; /* margin overflow fix */
}

HTML

<div class="full-height-content">
    This is your full height content
</div>
<div class="page-content">
    <p>This is your standard page content</p>
</div>

Here is a codepen: http://codepen.io/anon/pen/aNyQJm

Carlton
  • 838
  • 6
  • 16
  • Great, thanks, but there is a white margin at the top – O. Eliel Mar 30 '16 at 23:32
  • That is due to the default margins on the

    tag inside the main content. I have removed it and updated the codepen link. See the updated answer.

     – Carlton Mar 30 '16 at 23:34
  • 1
    A better solution to the issue they just brought up is to use `overflow-y: auto;` on the `div` [see this](http://stackoverflow.com/questions/13573653/css-margin-terror-margin-adds-space-outside-parent-element). The problem would otherwise return as soon as they try to add a margin to the inner element. – 4castle Mar 30 '16 at 23:39
  • Cheers @4castle, added to answer – Carlton Mar 30 '16 at 23:45