CODEWITHSUNDEEP
htmlcss
Julien Vincent
Julien Vincent

Reputation: 1238

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

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?

Upvotes: 2

Views: 1213

Answers (2)

Julien Vincent
Julien Vincent

Reputation: 1238

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>

Upvotes: 0

AndrewL64
AndrewL64

Reputation: 16311

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/

Upvotes: 2

Related Questions