How to Add Some Pixels to The Current Height of Div

How to add some pixels to the current height of div

Use padding.

 div {
      height: auto;
      padding-bottom: 10px;
    }

or

 div {
      height: auto;
      padding-top: 10px;
    }

or

 div {
      height: auto;
      padding-top: 5px;
      padding-bottom: 5px;
    }

if this is not you desired then add jQuery together with the css like below:
css:

 div#auto10 {
      height: auto;
    }

javascript:

$(document).ready(function(){
    $('#auto10').height($('#auto10').height() + 10);
});

Adding pixels in css

You could attempt using CSS variables and the var() function.
By defining an --width variable in your .block selector then setting the width attribute of the .wider selector to be calc(var(--width) + 100px, you can achieve a class that makes the box wider. Note that in order for this to work properly you have to add an additional --width attribute to every css selector that changes the width.

div {    width: var(--width, 100%);}.block {  height: 100px;  --width: 100px;  background-color: red}.wideblock {  height: 100px;  --width: 200px;  background-color: blue}
.wider {  width: calc(var(--width) + 100px);}

<p>Div with just block:</p><div class="block"></div><p>Div with block and wider:</p><div class="block wider"></div><p>Div with wideblock:</p><div class="wideblock"></div><p>Div with wideblock and wider:</p><div class="wideblock wider"></div>

Adjusting height and width style; pixel values come out as strings

Basically it's because style.height returns a string not an int so if you add any number to it it's going to cause an error.

You can use offsetHeight instead to grab the height of the element (minus the margins but including padding)

https://www.w3schools.com/jsref/prop_element_offsetheight.asp

(It's offsetWidth for the width, same logic though)

https://www.w3schools.com/jsref/prop_element_offsetwidth.asp

So your code would be:

var el = document.getElementById("box");
var height = el.offsetHeight;
var newHeight = height + 200;
el.style.height = newHeight + 'px';

jQuery - add pixels to height according to screen width

here you go [http://jsfiddle.net/6KfHy/1/]

var baseWidth = 90;
var stepWidth = 4;
var baseHeight = 20;
var growHeightPerStep = 1;

function changeHeight() {
    var windowW = $(window).width();
    var diffWidth = windowW - baseWidth;
    var diffHeight = parseInt(diffWidth / 4, 10);

    $('.grow').css('height', baseHeight + diffHeight + 'px');
}

changeHeight();

$(window).resize(function() {
    changeHeight();
});

DIV height based on child image height adds few extra pixels at the bottom

That space actually is a result of descender elements in fonts. You can get rid of it in a number of ways:

• add a vertical-align:top rule to the image jsFiddle example
• add font-size:0; to the containing div jsFiddle example
• add display:block; to the image jsFiddle example

How to get the height in pixels in pure javascript?

The property .clientHeight will return a number (the height in pixels).

In your case, below is the code to reset the height of div#main. Note that we're adding a "px" at the end for .style.height to work:

document.getElementById('main').style.height = parseInt(window.innerHeight) -document.getElementById('header').clientHeight + document.getElementById('footer').clientHeight + "px";

<div id="header">CONTENT</div><div id="main">CONTENT</div><div id="footer">CONTENT</div>

Javascript: Using element height as pixel value to set properties of other elements

If your styles are set inline, i.e. <div style="height: 100px;"></div>, then most probably your problem is in parsing height style value. In this case Sheight will be "100px", which will simply concatenate with other values forming something like 100px45px, which isn't really good.

To solve the problem parse the value to integer with parseInt and use correct addition:

var Sheight = parseInt(document.getElementById(divName).style.height, 10);
document.getElementById('bookmark').style.height = (Sheight + 45) + 'px';

How to get height of div in px dimension

Use .height() like this:

var result = $("#myDiv").height();

There's also .innerHeight() and .outerHeight() depending on exactly what you want.

You can test it here, play with the padding/margins/content to see how it changes around.

---

Related Topics