Question

我正在开发一个应用程序，它在我的主视图中有一个侧栏和两个div。我试图在容器内平均分割两者的高度。我试过身高= 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>

我把它放在一个小提琴中：http://jsfiddle.net/crmyq/

Answer 1

您应该将父容器的高度设置为100％（其父容器已经具有固定高度）并将子容器的高度设置为50％：

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

检查这个更新的小提琴：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%}

Answer 2

请在#mainView容器上给出100％的高度，并在#top和#middle容器上添加50％的高度。

#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*/
}

小提琴：http://jsfiddle.net/nikhilvkd/crmyq/3/

在容器内拆分两个div相等

2 个答案: