100% Height Div with 2 lines of code

2016 Edit: This post is really out-dated. If you are looking for a solution for 100% height divs, please use modern css as described here /2016/modern-100-percent-height-css/

EDIT: This post has several code-blocks of JavaScript to keep two divs at an equal height. I recommend the last method, if you are using jQuery — It seems to be more adaptive to different div content, working in more situations.

Check out the DEMO first, to see if this is what you want

The problem: Creating a div that auto-expands to 100% height of its container. The most common occurrence would be creating a two column layout for a menu, sidebar ads, etc…

The solution that never actually works:

“Since divs automatically inherit the height of their parent, if your parent doesn’t have height set, you cant get 100% of nothing. Set the parents height and it will work.”  Pshaw, I say.  While this may be the accepted standards mantra, I have never seen it actually work in a modern browser.

100 Percent Div Tutorial
Div! Y U NO Expand?!?

The Easy Solution (in 2 lines of code):

Working Demo on jsfiddle

Well, that’s actually 4 lines, if you include the script tag… But just 2 lines of JavaScript.

If you would like to keep the expanding div from collapsing too far, or expanding to much, simply add a conditional statement around the second line, like so:

Short Explanation:

Line 1 creates a new variable “h” and assigns this variable the height of an element found. This does not return the “height:” as specified in CSS, it returns the actual height of the document as it is displayed on the screen.

Line 2 fills the “height:” style value of the other, shorter, element with the variable h + “px”

Put this code near the end of your document, probably right before the body tag, and it will run right when the page loads. You could also wrap this in a jquery $(window).load, or even a $(document).ready. As it is, though, there is no library dependency – just plain-old-JavaScript!

Or, do it with jQuery instead:

Commenter Ivan couldn’t get this code working for him, so he rewrote it using jQuery. I have further rewritten his original code to be a bit shorter, and activate when the content of both divs has fully loaded. I recommend this method — if you are already loading jQuery — as it seems to work much better with dynamically loaded content.

Working jQuery demo

 

Edit #2 — There is a jQuery plugin called equalHeight that accomplishes this pretty easily

Check out my post 100% height using jQuery for more information about it.

Hacking MyMathLab (a case study in software security best-practices)

This article details an experience I had while using the software MyMathLab, and overviews software security best practices. There is no information in this article that would allow students to alter their grades or cheat in any way, but details minor exploits in the software and security infrastructure related to “locking down” a workstation. This post was written for educational purposes relating to software development and security.  

In keeping with security best practices, the software vulnerabilities were immediately show to both a math faculty member and a campus IT employee sometime before being published in this article.

MyMathLab is a software product, owned by Pearson (one of the largest textbook publishers in the US), including:

The Art Institute of  Houston, ASU, Baker College, Boise State University, Bossier Parish Community College, Cabrini College, Central Texas College, Chicago State University, Cleveland State Community College, Coastline Community College, College of the Sequoias, DeVry University, Florence Dablington Technical College, Florida State College at Jacksonville, Front Range Community College, Henry Ford Community College, Hillsborough Community College, Houston Community College, I State, Ivy Tech Community College, Jackson State Community College, Kapi’Olani Community College, Lone Star College Montgomery, LSU, Memorial University, Mesa Community College, Mississippi State University, Norwalk Community College, Odessa College, Quinsigamond Community College, Reading Area Community COllege, Riverside Community College, Rock Valley College, Sait Polytechnic, South Suburban College, Southern Illinois University, The University of Alabama in Huntsvilee, Triton College, Umpqua Community College, University at Albany, UHD, University of Idaho, UIC, The University of Mississippi, UT, The University of Toledo, University of Wisconsin-Stout, Volunteer State Community College, and Yavapie College

Why I Tried:

During the first-day-of-class-reading-of-the-syllabus my professor came to this line: “Do not use the computers in the classroom or math lab to use email, or use any other non-math website.” “Actually,” he said, “I’m pretty sure that the computer department locked down all of the computers, so why don’t you try, if you can actually get anywhere I’ll be pretty surprised, but come and show me.”

Challenge accepted!

MyMathLab Opening Screen

During my first glance around the software, I gathered some basic information:

  • MyMathLab is a web-application that allows students to
  1. read from an e-text (a pdf)
  2. watch video examples (in quicktime)
  3. do homework in a flash application
  4. watch math presentations (powerpoint)
  • MyMathLab runs in a stripped down version of Internet Explorer.
  • The entire computer seems to be under the control of some type of user-access control system. Attempts to click on the start-bar or the windows time are met with an “Unauthorized Function!” dialog box. I seem to be completely sand-boxed in.
  • There is no physical tower, or box powering my monitor, keyboard, or mouse. I seem to be using a terminal that connects to a MyMathLab server somewhere else on campus.

Thinking back to my experience at a highly micro-managed yet highly incompetent call-center, I remembered that my first, and probably easiest route to escape would be to find a dialog box that I could hijack and turn into a make-shift explorer window. From there I could navigate to anywhere I had permissions.

Failure 1: The weakest point in any system is the reliance on any third-party controls or software to perform a critical function.

Administrators will perform their due-diligence in locking-down any user access that they have created, but often fail to check, or even understand third-party systems that they give rights to — assuming that the third-party system will always behave.

This route of attack was remarkably simple, yet yielded a remarkable amount of access.

Step 1: find a dialog box

While the quicktime tutorials and the pdf e-text both opened in a custom reader, or at-least a custom shell of a known reader, the slides opened up right in a fully-featured Powerpoint session. I was a little surprised! I first went for the “open” button, which led to a “Unauthorized Function!” message. Good Job, guys. Open Recent and Save As were both dead-ends too.

“Let’s get creative,” I thought, and created a new document. That worked!  I noticed that more of the ribbon appeared — I must have been looking at a read-only version of the math slides. Now I see more font control, as well as some shapes, as well as more buttons along the ribbon: Insert, Design, Animation, Slide Show, Review, View, and Format.

The Insert tabs looked like a gold mine: insert videos, images, objects(ole I’m assuming), etc.  Inserting an image finally led to my dialog box!

Step 2: Explore Access.

I held back my hopes as the Image dialog box opened for me.  A couple things could still go wrong at this point: I might only have access to my sessions Documents and Settings Folder or the file-type could be restricted to images only. I held my breath and click on My Computer on the left of the dialog box…

Oh. My. Word.

  • C:/MyMathLabServer
  • Network Places

To test out my permissions, I right-clicked, created a new text file, and then proceeded to delete that file. Success.

Failure 2: Giving the user write permissions to system critical files.

Now for a look around: C:/ had all the normal stuff: program files, windows, documents and settings.

The most I dared to do was to open one the the DLL files in program files/mymathlab with notepad and make a small change in a comment section, save it, and then change it back after checking to see if it worked. It did.  I also had access to the host-file entries that prohibited any access servers other than mymathlab.  Probably the most damning however, was my ability to open the command prompt, which allows nearly unrestricted access to the inner workings of the local network, as well as the local workstation.

Failure 3: The workstation user account had access to the command prompt.

After class, however, my inner white-hat prevailed, and I ended up telling my professor what I had found, who then nearly sprinted up to the CS support lab and dragged a tech down for me to walk through my simple exploit. And seeing as I gave CS support adequate warning about the exploit, I now have no qualms about sharing my story, because I’m sure its fixed by now!

The moral of my story? Don’t be a bad programmer, don’t rely on third-party software/controls for essential functions, and most of all: don’t try and lock-down students, it just makes them curious.