容器溢出部门

Question

我正在研究应用程序并尝试设计用户界面。有问题让事情继续下去。包含在我的主视图中的div延伸通过它们的容器。

这是大部分的代码：http://jsfiddle.net/9t3sn/

<div id="mainView"> 
    <div id="top"> 
     <div><label>Entity <select id="entityDropDown" ></select></label></div> 
     <div id="removeEntity" class=""><a onclick="">&#10006;</a></div> 
     <div><label>Entity Available <select id="entityAvailable" multiple></select></label></div> 
     <div><label>Entity Assigned <select id="entityAssigned" multiple></select></label></div> 
    </div> 

    <div id="middle"> 
     <div id="entityInfo"> 
      <label>placeholder: <input type="text" id="domainID" disabled="true"/></label></br> 
      <label>placeholder: <input type="text" id="entityName" /></label></br> 
      <label>placeholder: <input type="text" id="userEmail" /></label></br> 
      <label>Description: <textarea id="groupDesc" rows='3' cols="25"></textarea></label></br> 
      <label>Group Templates: <select id="groupTemplates"></label></select></br> 
     </div> 
    </div> 

    <div id="bottom"> 
     <div id="updateEntity" class=""><a>Update Entity Info</a></div> 
    </div> 
</div> 

CSS：从#mdContainer #top, #mdContainer #middle, #mdContainer #bottom类

#mdContainer{ 
    position: relative; 
    border: 2px solid red; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 100%; 
    padding: 0px; 
    margin: 0; 
    box-sizing: border-box; 
    -moz-box-sizing:border-box; 
} 
#mainView{ 
    position: relative; 
    top: 0; 
    bottom: 0; 
    background: green; 
    color: black; 
    left: 140px; 
    right: 0; 
    padding-left: 0px; 
} 

#mdContainer #top,#mdContainer #middle,#mdContainer #bottom{ 
    height: auto; 
    width: 100%; 
    padding: 5px; 

} 

Answer 1

删除宽度。并将余裕设置为#mainView而不是左边。

#mainView { 
position: relative; 
top: 0; 
bottom: 0; 
background: green; 
color: black; 
margin-left: 140px; 
right: 0; 
padding-left: 0px; 
} 

#mdContainer #top, #mdContainer #middle, #mdContainer #bottom { 
height: auto; 
padding: 5px; 
} 

的原因是，div的默认情况下100％的宽度，直到你定位，如果添加宽度和填充，它会计算为容器+ 10px的宽度