Spliting two divs equality within container - css

Question

I'm working on an application which has a side bar and two divs in my main view. I'm trying to split the height of both equally within the container. I tried height = 50% but that didn't work out too well.
<div id="mainView" ng-controller="userCtrl">
<div id="top">
<div id="topRow">
<label for="entityDropDown">Select a user: </label>
<select id="entityDropDown"
ng-model="selectedUser"
ng-options="user as user.name for user in users"
ng-change="getUserInfo(selectedUser)">
</select>
</div>
</br></br>
<div id="entityStatus">
<div>
<label for="entityAvailable">Available Groups</label>
<select id="entityAvailable" multiple
ng-model="selectedAvailableGroups"
ng-options="g.name for g in availableGroups | orderBy:'name'">
</select>
</div>
<div id="moveButtons" >
<button type="button" ng-disabled="!selectedUser || availableGroups.length === 0" ng-click="addUserToGroup()">Add User</button>
<button type="button" ng-disabled="!selectedUser || assignedGroups.length == 0" ng-click="removeUserFromGroup()">Remove</button>
</div>
<div>
<label for="entityAssigned">Assigned Groups</label>
<select id="entityAssigned" multiple
ng-model="selectedAssignedGroups"
ng-options="g.name for g in assignedGroups | orderBy:'name'">
</select>
</div>
</div>
<br class="clearfix"/>
</div>
<div id="middle" ng-show="selectedUser">
<div id="entityInfo">
<div>
<label for="entityName">Name: </label>
<input type="text" id="entityName" ng-model="selectedUser.name"/>
</br>
<label for="entityEmail">Email: </label>
<input type="text" id="entityEmail" ng-model="selectedUser.email"/>
</br>
<button type="button" ng-disabled="!selectedUser" ng-click="updateUserInfo()">Update User</button>
</div>
<div>
<label for="entityId">ID: {{selectedUser.id}} </label>
</br>
<label for="entityDomain">Domain: {{selectedUser.domain}} </label>
</br>
<label for="isAdmin">Admin: {{selectedUser.isAdmin}}</label>
</br>
</div>
</div>
<br class="clearfix"/>
</div>
</div>
I put it in a fiddle: http://jsfiddle.net/crmyq/

Answer 1

you should set the height of the parent container to 100% (its parent container already has a fixed height) and set the height of the child containers to 50%:
#mainView {height:100%}
#top {height:50%; }
#middle {height:50%; }
check this updated fiddle: http://jsfiddle.net/crmyq/1/
I also removed the padding on the child containers, since padding is added to the height which will lead to the child containers sticking out of the parent container. You can use margins (or padding) on the elements inside the child containers to make up for the removed padding.
UPDATE
for switching between 2 or 3 rows, you could use a class on the #mdContainer div (switch to using classes instead of ID's for this, it's easier):
#mdContainer.2columns .top, #mdContainer.2columns .middle {height:50%}
#mdContainer.3columns .top, #mdContainer.3columns .middle,
#mdContainer.3columns .bottom {height:33.33%}

Answer 2

Please give 100% height on your #mainView container and also add 50% height on #top and #middle container.
#mainView{
position: relative;
top: 0;
bottom: 0;
height:100%;/*new changes*/
background: green;
color: black;
margin-left: 140px;
right: 0;
padding-left: 0px;
}
#top{
background: blue;
color:white;
height:50%;/*new changes*/
text-align: center;
}
#middle{
background: red;
color: white;
height:50% ;/*new changes*/
}
fiddle : http://jsfiddle.net/nikhilvkd/crmyq/3/