StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>After some testing I figure out this solution: (works with: Opera, Firefox and Google Chrome) (box-sizing: doesn't work on Firefox when used JavaScript?!)</p> <pre><code><!DOCTYPE HTML> <html> <body> <style type="text/css"> .c { background-color:#FF0000; overflow:hidden; margin:0px; padding:0px; } .d { left:10px; border:13px solid black; padding:7px; margin-bottom:13px; margin-top:4px; background-color:#FFFF00; } </style> <div class="c" id="c"> <div id="d1" class="d">text text text</div> <div id="d2" class="d">text text text</div> <div id="d3" class="d">text text text</div> </div> <script type='text/javascript'> /////////////////////////////////////////// // see: http://stackoverflow.com/questions/1601928/incrementing-the-css-padding-top-property-in-javascript function getStyle(elem, name) { if (elem.style[name]) { return elem.style[name]; } else if (elem.currentStyle) { return elem.currentStyle[name]; } else if (document.defaultView && document.defaultView.getComputedStyle) { name = name.replace(/([A-Z])/g, "-$1"); name = name.toLowerCase(); s = document.defaultView.getComputedStyle(elem, ""); return s && s.getPropertyValue(name); } else { return null; } } /////////////////////////////////////////// var c = document.getElementById("c"); var d1 = document.getElementById("d1"); var d2 = document.getElementById("d2"); var d3 = document.getElementById("d3"); var paddingY = parseInt(getStyle(d1, 'paddingTop'),10) + parseInt(getStyle(d1, 'paddingBottom'), 10); var marginTop = parseInt(getStyle(d1, 'marginTop'),10); var marginBottom = parseInt(getStyle(d1, 'marginBottom'),10); var marginMax = Math.max(marginTop, marginBottom); var borderY = parseInt(getStyle(d1, 'borderTopWidth'),10) + parseInt(getStyle(d1, 'borderBottomWidth'), 10); var h=600; var count=3; var hd = Math.floor((h-marginMax*(count-1) - marginTop - marginBottom - (paddingY + borderY) *count) / count) ; c.style.height=h +"px"; d1.style.height=hd +"px"; d2.style.height=hd +"px"; d3.style.height=hd +"px"; </script> </body> </html> </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload