css - 在容器内拆分两个 div 相等

Question

我正在开发一个应用程序，它在我的主视图中有一个侧边栏和两个 div。我试图在容器内平均分割两者的高度。我试过 height = 50% 但效果不太好。

    <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>

我把它放在 fiddle 里了:http://jsfiddle.net/crmyq/

Answer 1

你应该将父容器的高度设置为100%(它的父容器已经有一个固定的高度)并且将子容器的高度设置为50%:

#mainView  {height:100%}
#top       {height:50%; }
#middle    {height:50%; }

检查这个更新的 fiddle :http://jsfiddle.net/crmyq/1/

我还删除了子容器上的填充，因为填充添加到高度会导致子容器伸出父容器。您可以在子容器内的元素上使用边距(或填充)来弥补移除的填充。

更新

要在 2 行或 3 行之间切换，您可以在 #mdContainer div 上使用一个类(为此切换到使用类而不是 ID，这样更容易):

#mdContainer.2columns .top, #mdContainer.2columns .middle   {height:50%}
#mdContainer.3columns .top, #mdContainer.3columns .middle, 
#mdContainer.3columns .bottom                               {height:33.33%}