html - Div 从容器中溢出

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

从 #mdContainer #top, #mdContainer #middle, #mdContainer #bottom 类中移除宽度。并将 margin-left 而不是 left 设置为 #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% 宽度，如果您添加宽度和填充，它将计算为容器的 100% + 10px 宽度