CSS表溢出父div

Question

对不起 - 我觉得这是一个老栗子，但其他帖子提供解决方案的桌子溢出了它的父母，似乎没有帮助我。

下面是我的HTML和CSS代码，我正在尝试使用div navMain中包含的表数据扩展MainBody div。

我只是出于想法，并希望有人可以摆脱我的痛苦。

目前桌子溢出了MainBody div。Example

＆＃13;

＆＃13;

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800,800italic,300italic,400italic,600italic,700italic);
@import url('https://fonts.googleapis.com/css?family=Carter+One');
@import url('https://fonts.googleapis.com/css?family=Poppins');
.CarterOne {font-family: 'Carter One', cursive;}
.data-table {
    font-size: 11px;
    width: 100%;
    border: 0;
    table-layout:fixed;
    word-wrap:break-word;
    border-collapse:collapse;
}
.data-table th, .data-table td {
    border: 0;
    border-collapse: collapse;
    height: 14px;
    padding: 0px 3px;
    margin: 0;
}

body {
   padding: 0px ;
   margin: 0px ;
   background-color: white;
   font-family: "open sans", "Trebuchet MS", Arial, Helvetica, sans-serif;
}

#main {
}

#mainTop {
   position: fixed;
   font-size:11pt;
   background-color: #e88732;
   border-bottom: 2px solid #d35400;
   vertical-align: middle;
   color: #404040;
   white-space: nowrap;
   height: 70px;
   width:100%;
   z-index:99;

}

#mainTopLeft {
  padding: 10 5 0 0;
}
#mainTopRight {
   top: 0;
   position: absolute;
   font-family:'Poppins', sans-serif;
   vertical-align: middle;
   margin: 24 0 0 280;
   background-color: #e88732;
   font-size: 12px;
}
#mainTopRight img {
   padding: 0 5 0 10;
   margin: -10 0 0 0 ;
   vertical-align: top;
}
#mainTopRight a {
   text-transform: uppercase;
   color: #262626;
   margin: 0 5 0 5;
   letter-spacing: 1.1px;
}
#mainBody {
   margin: 0;
   padding: 72 0 0 15;
   width:100%;
   height:100%;
}

#bodyNav {
   margin:0 auto;
   padding-left: px;
   height: 90px;
   float:left;

}
#bodyPane  {
   display: inline-block;
   float:left;
   padding-top: 0px;
   background-color: white ;
   border: 1px solid #aaa;
   box-shadow: 0 0 20px #555;
    -moz-box-shadow: 0 0 10px #555;
    -webkit-box-shadow: 0 0 10px #555;

    border-radius: 0 4px px 5px;
    -moz-border-radius: 0 5px 5px 5px;
    -webkit-border-radius: 0 5px 5px 5px;
   width: 100%;
   height:100%;
}

.tabs {
   position: absolute;
   top: 102;
   left: 170;
   width: 1100; /* 1100- stops float wrapping down when window is narrows */
   font-size: 11pt;
   list-style: none;
   text-align: center;
   white-space: nowrap;
}


.tabs li {
	float: left;
    cursor: default;
    border: 1px solid #ccc;
    border-bottom: 0;
    color: #aaaaaa;
    height: 32px;
    width: 130px;
    margin: 0 8 0 0;
    padding: 12 2 0 2px;
    border-radius: 4px 4px 0px 0px;
    box-shadow: inset -1px 1px 0 rgba(255,255,255,.5);
    background: white;
}
.tabs [data-opt]:after  {
   content:attr(data-opt);
}

.tabs li.active {
    z-index: 9 !important;
    color:  #cc0000;
    font-weight:bold;
    background: white;
    height: 33px;
    margin-bottom: -1px;
    border-color: #888;
	}

.tabs li a  { color:inherit; text-decoration: none;}

.tabs img {
     width:22px;
     border: 0;
     cursor:pointer;
     padding: 0 5 2 0;
     border: 0;
     opacity:.4;
     vertical-align:middle;
}

.btnImg, .docsIcon {
     width:22px;
     border: 0;
     cursor:pointer;
     padding: 0 5 2 0;
     border: 0;
     opacity:.4;
     vertical-align:middle;
}



/* SYSTEM MENU SIDEBAR  */
#bodySidebar {
   position: absolute;
   width:140px;
   height:100%;
   margin:0;
   padding: 0;
   vertical-align: top;
}


.tree,
.tree ul {
  margin:0 0 0 1em; /* indentation */
  padding:0;
  list-style:none;
  color:#369;
  position:relative;
  font-size:9pt;
  font-weight:normal;
  white-space: nowrap;
}

.tree ul {margin-left:.5em} /* (indentation/2) */

.tree:before,
.tree ul:before {
  content:"";
  display:block;
  width:0;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  border-left:1px solid;
}

.tree li {
  margin:0;
  padding:0 1.5em; /* indentation + .5em */
  line-height:1.6em; /* default list item's `line-height` */
  position:relative;
  cursor:pointer;
}

.tree  li:hover {
   color: red;
}

.tree li:before {
  content:"";
  display:block;
  width:10px; /* same with indentation */
  height:0;
  border-top:1px solid;
  margin-top:-1px; /* border top width */
  position:absolute;
  top:1em; /* (line-height/2) */
  left:0;
}

.tree li:last-child:before {
  background:white; /* same with body background */
  height:auto;
  top:1em; /* (line-height/2) */
  bottom:0;
}
.tree .selected {
   color:#cc0000;
}
.tree .hover {
   color:#cc0000;
}


 .navSelectorHeading {
   width: 192px;
   height: 35px;
   background-color: #e88732;
   border: 1px solid #e88732;
   color: white;
   font-weight:bold;
   text-align: center;
   vertical-align: middle;
   margin: 0  0 0 0;
   padding: 12 0 0 0;
}

.navTop {
    position: absolute;
    top: 178px;
    left: 210px;
    width:1300;
	 font-size:10pt;

}
.navTop ul {
    cursor:pointer;
    list-style-type: none;
    margin: 0;
    padding: 0 0 0 8;
    color:#404040;
 }
.navTop li {
	color:#aaaaaa;
   margin: 0 0 0 0;
   padding: 2 18 4 0 ;
   float: left;
}
.navTop li:hover {
    color: #444444;
/*
    border: 1px solid #e88732;
    border-radius: 5px 5px 0px 0px;  */
}
.navTop img:hover {
   opacity:.8;
}
.navtop li.navLiSelected {
   color:  #cc0000;
   font-weight:bold;
}

.navTop img {
     width:22px;
     border: 0;
     cursor:pointer;
     padding: 0 0 0 0;
     margin: 0;
     border: 0;
     opacity:.4;
     vertical-align:middle;
}

.navtop li a  { color:inherit; text-decoration: none;}

.navMain {
   float: top;
    position: absolute;
    left: 210px;
    top: 211px;
    width:100%;
    border-top: 1px solid #ccc;

    }



a { text-decoration: none; font-weight: normal; }



.body { font-size: 9pt; }
.tbody { font-size: 9pt; }

h1,h2,h3 {
   color: #e88732;
   font-size: 14pt;
   padding: 0;
   margin: 8 0 0 0;
}
h1 {
   font-size: 2em;
}
h2 {
   font-size: 1.5em;
}
h3 {
   font-size: 1.1em;
}


input[type="text"], input[type="password"], select {
  border-radius: 3px;
   background-color:ffffee;
   color: #202020;
}
input[type="submit"], input[type="button"], button  {
  height: 24px;
  font-size:10pt;
  padding: 0 12 0 12;
  background-color: #e88732;
  border: 1px solid #d35400;
  color: white;
  border-radius: 3px;
  white-space: nowrap;
  display:inline-block;
  cursor:pointer;
  box-shadow: 1px 1px 3px #aaaaaa;
  vertical-align: bottom;
}

input[type="radio"]:required {
  box-shadow: 1px 1px 1px rgba(200, 0, 0, 0.85);
}


input[type="submit"]:hover, input[type="button"]:hover, button:hover  {
  color: #d35400;
  background-color: white;
  box-shadow: 3px 3px 5px #888888;
}

img {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently */
}

＆＃13;

<html>
      <head>
            <meta charset="UTF-8">
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <link rel="stylesheet" href="page_layout_files/main.css" type="text/css">           
            <title>Setup</title>
      </head>
      
      <body height="100%" leftmargin="0" topmargin="0" rightmargin="0" bottommargin="0">

            <script> document.title='Setup'</script>
            <div id="main">
                  <div id="mainTop">
                        <div id="mainTopLeft">
                        </div>
                        <div id="mainTopRight">
                        </div>
                  </div>
                  <div id="mainBody">
                        <div id="bodyNav">
                              <span class="hl1">Setup</span>
                              <span style="padding-left: 55">
                                    <ul class="tabs" width="40">
                                          <li class="active"><a onclick="return frsCheckEditActive(true) " href="#" title="">Organizations </a></li>
                                    </ul>
                              </span>
                        </div>
                        <div id="bodyPane">
                              <div class="navSelectorHeading" align="center">Organizational Units
                              </div>



                              <div style="overflow-x:auto;height:550;width:196;">
                                    <ul class="tree"> 
                                          <li onclick="orgSelectorSubmit(frm_oFrmOS2_5_0_0, 1, '1_0_0_0'); return false">Computer Futures</li>
                                          <li onclick="orgSelectorSubmit(frm_oFrmOS2_5_0_0, 1, '4_0_0_0'); return false">David's Templates</li>
                                          <li onclick="orgSelectorSubmit(frm_oFrmOS2_5_0_0, 1, '2_0_0_0'); return false">Pronto Freight Services</li>
                                          <ul></ul>
                                          <li onclick="orgSelectorSubmit(frm_oFrmOS2_5_0_0, 1, '2_8_0_0'); return false">Logistics Department</li>
                                    </ul>
                              </div>
                              <script>
                                    function mainFormSubmit(fn) {
                                          if (!frsCheckEditActive(true)) return false;
                                          f = frm_oFrmOS2_5_0_0;
                                          f.fn.value=fn;
                                          f.submit()
                                                }
                              </script>
                              <div class="navTop">
                                    <ul navtop="">
                                          <li onclick="return mainFormSubmit('od')"><img src="page_layout_files/hrsformdetails.png"> Details </li>
                                    </ul>
                              </div>
                              <div class="navMain" id="navMain">
                                    <table style="height:auto">
                                          <tbody>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>
                                                <tr><td style="background-color:#eee">Row</td></tr>

                                          </tbody>
                                    </table>
                              </div>   
                        </div> 
                  </div>   
            </div>   
      </body>
   </html>

＆＃13;

＆＃13;

＆＃13;

Answer 1

.navMain使用position: absolute，这并不占用其内部空间。将其更改为position: relative。