CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Simon
Simon

Reputation: 147

Outer height of div not calculated

I am trying to calculate the outer height of the div content so that it will expand the sticky-container to give the illusion that the image is following the user. For some reason using outerHeight will not work. I know I can add the PX value in separately however this does not seam clean to me.

Codepen

JS

$(".sticky-container").css({'height':($(".content").outerHeight(false)+'px')});

HTML

<div class="filler">Scroll down</div>
<div class="sticky-container">
  <div class="content">Bacon ipsum dolor amet shankle pancetta bacon beef ribs shank strip steak beef andouille brisket ground round drumstick frankfurter. Beef rump brisket kevin ground round strip steak picanha pancetta andouille pig. Landjaeger pork meatball, turducken
    leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andou leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger,
    meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger,
    meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger,
    meatloaf short ribs strip stea leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue
    pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue
    pastrami prosciutto capicola. leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs ando leberkas ribeye sausage frankfurter porchetta tongue fatback filet mignon pork belly beef ribs andouille. Biltong fatback
    swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola.uille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue
    pastrami prosciutto capicola.k capicola flank andouille. Tongue pastrami prosciutto capicola.ille. Biltong fatback swine pancetta salami hamburger, meatloaf short ribs strip steak capicola flank andouille. Tongue pastrami prosciutto capicola. Chuck
    venison ball tip boudin capicola t-bone ham hock sirloin pork. Meatloaf t-bone pancetta cupim cow shankle drumstick pork chop corned beef strip steak. Pork chop beef tenderloin kielbasa. Beef ribs beef cow ham hock biltong alcatra kevin picanha fatback
    pig brisket ground round boudin porchetta rump. Ham hock drumstick andouille filet mignon prosciutto porchetta shoulder kielbasa sirloin, shank swine. Cow biltong jowl, short loin turkey frankfurter flank tri-tip pancetta tenderloin. Rump ground round
    sirloin, fatback drumstick salami prosciutto picanha. Sausage brisket porchetta, ham pancetta turducken pork chop. Short loin porchetta strip steak, frankfurter landjaeger bresaola hamburger sirloin.
  </div>
  <div class="sticky-stuff"></div>
</div>

<div class="filler"></div>

html 

html,body{
  height: 100%;
  margin: 0px;
  padding: 0px;
}


.filler{
  height:100%;
  background: green; 
  width: 100%;
}

.sticky-container{
   position: relative;
  height:100%;
  width:100%;
}

.content{
  width: 400px;
  position: absolute;
  top: 0;
  left: 0;
  z-index:1;
  background:white;
  margin: 50px;
}

.sticky-stuff{
  background: url(http://i.imgur.com/yT65RYM.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

Upvotes: 1

Views: 71

Answers (1)

KWeiss
KWeiss

Reputation: 3154

You're not including the margin of the inner div. Just change false to true.

$(".sticky-container").css({'height':($(".content").outerHeight(true))});

Upvotes: 1

Related Questions