Setting DIV heights in JavaScript

Question

I've created a jsFiddle to illustrate the problem I am having with some images:

The HTML for the dual column layout is like:

            <div style="">
                <div id="divContactTexas" style="width: 50%; float: left; background-color: red;">
                    Lorem ipsum 
                    <img src="http://brownfieldsubslab.com/texas.gif" />
                </div>
                <div id="divContactCalifornia" style="width: 50%; float: left; background-color: blue;">
                    Lorem ipsum 
                    <img src="http://brownfieldsubslab.com/california.gif"/>
                </div>
            </div>


            var texasHeight = document.getElementById('divContactTexas').scrollHeight;
            console.log("texasHeight:"+texasHeight);
            var californiaHeight = document.getElementById('divContactCalifornia').scrollHeight;
            console.log("californiaHeight:"+californiaHeight);
            var maxHeight = (texasHeight>californiaHeight) ? texasHeight : californiaHeight;
            console.log("maxHeight:"+maxHeight);    
            document.getElementById('divContactTexas').style.height=maxHeight+'px';
            document.getElementById('divContactCalifornia').style.height=maxHeight+'px';

I have a mockup page on the live site: http://brownfieldsubslab.com/contact.html

So then I am having a trouble mainly in Chrome where as I change the size of the browser window more and more narrow the images at some point when width of browser window is small starts to be cut off mainly in Chrome. I have experimented with just adding more pixels to the height it does alleviate the problem but I am wondering why the image gets chopped off is there a way to prevent this?

The problem starts to look like:

enter image description here

I have tried looking into if scrollHeight or which height to use that doesn't really seem to matter. It must be something else.

Thank You

sabithpocker · Accepted Answer · 2014-10-23 06:35:09Z

1

http://jsfiddle.net/77r41c5j/4/embedded/result/

http://jsfiddle.net/77r41c5j/4/

function fixHeight(){
    //normalize to check
    document.getElementById('divContactTexas').style.height='auto';
    document.getElementById('divContactCalifornia').style.height='auto';

    var texasHeight = document.getElementById('divContactTexas').scrollHeight;
    console.log("texasHeight:"+texasHeight);
    var californiaHeight = document.getElementById('divContactCalifornia').scrollHeight;
    console.log("californiaHeight:"+californiaHeight);
    var maxHeight = (texasHeight>californiaHeight) ? texasHeight : californiaHeight;
    console.log("maxHeight:"+maxHeight);    
    document.getElementById('divContactTexas').style.height=maxHeight+'px';
    document.getElementById('divContactCalifornia').style.height=maxHeight+'px';
}

window.onload = fixHeight;
window.onresize = fixHeight;

Wrap your code in a function and call it whenever window is resized, initially call it when window loads.

And for the image cutoff, use css.

#left-side-image{
  width: 100%;
  max-width: 212px;
}

with CSS http://jsfiddle.net/77r41c5j/5/embedded/result/

http://jsfiddle.net/77r41c5j/5/

edited Oct 23, 2014 at 6:35

answered Oct 23, 2014 at 6:27

sabithpocker

15.6k1 gold badge44 silver badges77 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Eae Over a year ago

That's very interesting. I applied the CSS directly to the IMG TAG. The problem goes away. Thank you for posting this.

Collectives™ on Stack Overflow

Setting DIV heights in JavaScript

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related