Getting height of a div to be screen-height but extend with content

Question

I have a div with position absolute (required) inside a container div with position absolute (required) and I want the child div to be the width of the devices screen but extend as content within it expands. Before you mark this as duplicate please note I have looked at questions like this and this and many more.

my css (sass):

.container
  position: absolute
  overflow: visible
  width: 100%

.page
  position: absolute
  overflow: visible
  width: 100%
  min-height: 100vh

my HTML

<div class="container">
    <div class="page">
        //content
    </div>
</div>

With this setup, the page div does not extend with the content. What am I doing wrong?

**Duplicate question here's the solution** [How to make div fixed in height but grows if content is bigger than height?][1] [1]: http://stackoverflow.com/questions/8473273/how-to-make-div-fixed-in-height-but-grows-if-content-is-bigger-than-height?rq=1 — Nishant Mendiratta, Mar 30 '15 at 18:38
Please do not use the above link - actions get carries through to all users (browser-sync reload gulp plugin) sorry about that. use http://julienvincent.zapto.org/#/projects — Julien Vincent, Mar 30 '15 at 18:49

score 2 · Answer 1 · answered Mar 30 '15 at 18:47

2

Add height: 100% and width: 100%; to your body tag like this:

html, body {
    height: 100%;
    width: 100%;
}

Then add min-height: 100%; to the container like this:

.container  {
  position: absolute;
  width: 100%;
  min-height: 100%;
}

And finally add height: auto; to your child div like this:

.page  {
  position: absolute;
  width: 100%;
  height: auto;
}

Here's a jsfiddle with above codes: https://jsfiddle.net/AndrewL32/e0d8my79/33/

answered Mar 30 '15 at 18:47

AndrewL64

15,794
8
47
79

If the above is not what you want, then please elaborate a little bit more on what you're trying to do. – AndrewL64 Mar 30 '15 at 18:48
This solution does not work. It results in the div not showing at all. Also I do not think I need to elaborate on anything else? I have provided an example URL – Julien Vincent Mar 30 '15 at 18:51
Although this confuses me as it works in your jsFiddle but not on my project. – Julien Vincent Mar 30 '15 at 18:56
Lol You sure there aren't any css properties that might conflict with the ones I sent – AndrewL64 Mar 30 '15 at 19:12
I have been checking and checking again but can't find anything. – Julien Vincent Mar 30 '15 at 19:13
Haha ok wait up. I'll just finish up my work real quick and I'll recheck your site again. – AndrewL64 Mar 30 '15 at 19:14
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/74136/discussion-between-julien-vincent-and-andrew-lyndem). – Julien Vincent Mar 30 '15 at 20:19

score 0 · Accepted Answer · answered Mar 31 '15 at 20:43

I solved it by adding a third div with a min-height of 100vh, and then all the child elements go within using position: relative

css:

.container
  position: absolute
  overflow: visible
  width: 100%

.second-container
  position: relative
  width: 100%
  min-height: 100vh

.page
  position: absolute
  overflow: visible
  width: 100%
  min-height: 100vh

html:

<div class="container">
    <div class="page">
        <div class="second-container">
            //child elements with position: relative
        </div>
    </div>
</div>

Getting height of a div to be screen-height but extend with content

2 Answers2