CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user4325086
user4325086

Reputation:

How to dynamically set padding and have it show without refreshing?

I'm trying to make a design with a background at 100% height and then a padded area below it (outside view) with some other content on the same background.

Having the padded area fixed in height is easy enough, but I'm using Bootstrap's col-sm-4 divs with text in them, so as you resize the window, their width is decreased and height increased (because of the text having to fit), and then after a point collapsing into a stack of three divs.

Here's the jsfiddle, and the code:

HTML:

<div class="background">
<div class="bottom-div">
    <div class="col-sm-4"> ... Some filler text ...</div>
    <div class="col-sm-4"> ... Some filler text ...</div>
    <div class="col-sm-4"> ... Some filler text ...</div>
</div>
</div>

CSS:

.background {
  box-sizing: content-box;
  background: url('http://www.mixflavour.com/wp-content/uploads/2014/11/Nature-Wallpaper-03.jpg');
  position: relative;
  height: 100%;
}

body, html {
  height: 100%;
}

.bottom-div {
  position: absolute; 
  bottom: 0;
  background:rgba(0,0,0,0.5);
  width: 100%;
}

I want to set the padding-bottom of the background div to the same as the size of the bottom-div.

Instead of manipulating the padding via css, I decided to try using jQuery to set the padding dynamically. It works well, except for one thing: it only works after refreshing the page after each resize!

jQuery code:

$(".background").css("padding-bottom", $(".bottom-div").height());

You can try this by squeezing the window together until the padded area is thrown into view erroneously, then refreshing again to see it go back where it should be.

Why does it behave this way and is there a fix, using jQuery or not?

Edit: Updated the fiddle because I forgot closing one of the divs.

Upvotes: 0

Views: 2631

Answers (1)

naman kalkhuria
naman kalkhuria

Reputation: 404

$(window).resize(function(){
 $(".background").css("padding-bottom", $(".bottom-div").height());
});

You need to trigger the function everytime the window size changes.

Upvotes: 2

Related Questions