在容器內分割兩個div的平等

我正在研究一個應用程序，它在我的主視圖中有一個側欄和兩個div。我試圖在容器內均分高度。我嘗試過身高= 50％，但那個效果並不好。在容器內分割兩個div的平等

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

來源

2014-01-23 Batman

你應該父容器的高度設置爲100％（其父容器已經有一個固定的高度）和子容器的高度設置爲50％：

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

檢查該更新的提琴：http://jsfiddle.net/crmyq/1/

我也刪除的子容器填充，因爲paddin g被添加到將導致兒童容器伸出父容器的高度。您可以對子容器內的元素使用邊距（或填充）來彌補已移除的填充。

UPDATE

用於切換行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%}

來源

2014-01-23 07:25:22

，完美的工作謝謝。我有一個簡單的問題。我使用AngularJS，它允許我動態地查看我的視圖中的哪些元素。所以基本上我會用3個div代替2個主視圖到另一個主視圖。所以我會有top，middle，bottom。這將需要一個完全不同的CSS樣式表，其中所有三個分裂33％或有我可以做我的main.css文件？ – Batman

可能是。那麼你會更好地使用CSS類，而不是ID，因爲這將允許你更容易地在CSS中設置不同的高度。您可以使用#mdContainer上的單獨課程更輕鬆地設置高度，我會更新我的答案 –

請爲您的#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/

來源

2014-01-23 07:47:30 Krish

在容器內分割兩個div的平等

回答

相關問題