Using Anchors with the Same Height Columns hide content

Question

Customization

I am making a site with a simple two-column layout. Columns will have different heights (one above the other) and dynamic heights (each page content is different). The background color of the two columns should reach the lowest point of the longest column content.

For visual learners among you, CSS-Tricks has some good illustrations.

Attempt

I am using the One True Layout Method mentioned on the same CSS-Tricks page as halfway down.

I recreated it on jsFiddle here .

Here is the appropriate coding

HTML

<a href="#area1">Go To Section 1</a> <a href="#area2">Go To Section 2</a> <a href="#area3">Go To Section 3</a> <div id="hold"> <div id="col1"> Content Column 1 </div> <div id="col2"> Content Column 2 <h2 id="area1">Section 1</h2> <img src="http://placehold.it/100x750" alt=" placehold img" /> <h2 id="area2">Section 2</h2> <img src="http://placehold.it/100x750" alt=" placehold img" /> <h2 id="area3">Section 3</h2> <img src="http://placehold.it/100x750" alt=" placehold img" /> </div> </div> 

CSS

 #hold{ height:100%; overflow-y:hidden; } #col1, #col2{ padding-bottom:100000px; margin-bottom:-100000px; } #col1{ float:left; width:200px; } #col2{ margin-left:200px; } 

What works?

The layout works fully as expected. The column height adapts to dynamic content and always remains the same height as for each other.

Problem

Anchors abort it . That is, the page scrolls to the desired anchor in the content, but everything above the anchor is hidden. I found out that this is due to overflow-y:hidden; - the page scrolls to the content and, instead of using the scroll bar, hides the above content, not just scrolls it. Disabling overflow:hidden displays all the content as expected, but this is not ideal due to the large indentation.

Others experienced the same problem with no recognized solutions that I could find .

Possible solutions

I could put together a quick height check in JavaScript and set each column accordingly, but I really want the overall JS site layout not to be free.

Some articles have recorded absolute positioning, but this will not work with dynamic content.

Change to another column height method. But ... but ... but I already have this one so far! And who are we to just insert the impossible complex coding task .. :)

Call for help

Any ideas, fellow programmers?

Answer 1

Since you indicated that you do not necessarily need IE7 support, you can use one of the other methods (also found in the CSS Tricks link that you provided in your question) to use the screen: table and table-cell.

This gives you the same columns with the same height regardless of dynamic content, and also allows you to scroll through pages after clicking on the built-in anchor, without hiding the content completely out of sight.

I really despise the use of invisible tables for layout purposes, but in this case it does not force any additional DOM elements to simply change the values ​​of the DIV display attributes and is actually not more hacked than a positive complement with a negative mark approach.

 #hold{ width:100%; background:#ccc; height:100%; display: table; } #col1, #col2{ display: table-cell; } #col1{ width:200px; background:#00c; } #col2{ background:#c00; } 

Answer 2

you cheat the browser, but it has a side effect (it breaks the anchor). a better solution would be to find another way to adjust the column height, but it looks like you did more research in this area, and then I don't care.

based on the parameters of your question (it seems you do not want to use JavaScript for development, and you really do not want to change the method that you use to correct the columns), I would say that the closest you can get to this would be to use your css for design and javascript to anchor.

this snippet should work for you

 var isScrollFix = false; document.getElementById('hold').addEventListener('scroll',function(e){ if(!isScrollFix) {//dont copy our own scroll event onto document isScrollFix = true; var scrollTo = this.scrollTop; this.scrollTop = 0; window.scroll(0, scrollTo); } else { isScrollFix = false; } }); 

or on jsfiddle with a little extra code to account for other situations, as well as http://jsfiddle.net/joshK/P72LV/5/