gridpanel流出包裝容器

Question

我在asp.net中設計一個web應用程序，我遇到了一個嚴重的問題，當瀏覽器調整大小時，我的窗體的gridpanel離開了包裝容器..我的web應用程序的鏈接 http://everest.planetearthsolution.com/Setup/Ledgers/ChartOfAccounts.aspx

當您調整瀏覽器的大小或更改網格面板流出容器的分辨率時，只需儘量減少瀏覽器，您就會知道我在說什麼。我在做什麼錯了？繼承人的CSS

這是母版頁

body { 
    background-color: #658A07; 
} 

#container { 
    background-color: #F4FAE1; 
    height: 100%; 
    width: 90%; 
    margin: 0px auto; 
    border: 1px solid #B8C97F; 
} 

#left { 
    float: left; 
    width: 304px; 
    background-color: #F4FAE1; 
    height: 100%; 
    border-right: solid; 
    border-right-width: 1px; 
    border-right-color: #B8C97F; 

} 

#content { 
    background-color: #FFFFFF; 
    min-height: 100%; 
} 

#form { 
    padding-left: 314px; 
} 

#footer { 
    clear: both; 
    background-color: #DDEBB2; 
    height: 15px; 
    width: auto; 

    border: 1px solid #B8C97F; 
    margin: 0 auto; 
    text-align: center; 
    padding-top: 6px; 
} 

#logo { 
    height: 44px; 
    background-color: #FFFFFF; 
    padding: 4px; 
} 

#breadcrumb { 
    height: 16px; 
    background-color: #DDEBB2; 
    border-bottom: solid; 
    border-bottom-width: 1px; 
    border-bottom-color: #CDDE9E; 
    padding: 4px; 
    padding-left: 314px; 
} 


#tree { 
    background: #000000; 

} 

.searchbox { 
    background: url(Images/searchbox.png) top right no-repeat; 
    background-size: 20px 20px; 
    padding: 2px 2px 2px 2px; 
    height: 20px; 
    width: 296px; 
    border: 1px solid #B8C97F; 
    cursor: pointer; 
} 


.item-selector 
{ 
    background: url('../../Resource/Icons/search-16.png') no-repeat; 
    background-position: 4px 4px; 
    height: 20px; 
    width: 20px; 
    display: inline-block; 
    outline: none; 
} 

及以下的CSS的CSS是的GridPanel和其他形式的內容的CSS

html, body, table, tr, td, h1, h2, h3, h4, h5, input, select, p, textarea { 
    margin: 0px; 
    padding: 0px; 
    font-family: 'Segoe UI', 'Tahoma', 'Arial', 'Open Sans', open-sans, 'Source Sans Pro', MyriadPro-Regular, 'Myriad Pro Regular', MyriadPro, 'Myriad Pro', 'Lucida Grande', 'Droid Sans', Ubuntu, sans-serif; 
} 

h1, h2, h3, h4, h5 { 
    font-family: 'Segoe UI Light', Tahoma, Geneva, Arial, 'Open Sans', open-sans, 'DejaVu Sans', 'Liberation Sans', Freesans, 'DejaVu Sans', sans-serif !important; 
} 

h1, h2, h3, h4, h5 { 
    font-weight: lighter; 
    color: #658A07; 
    cursor: pointer; 
} 

h1 { 
    font-size: 28px; 
} 

h2 { 
    font-size: 24px; 
} 

h3 { 
    font-size: 20px; 
} 

h4 { 
    font-size: 18px; 
} 

h5 { 
    font-size: 16px; 
} 

a { 
    text-decoration: none; 
} 

    a, a:visited { 
     color: #29690C; 
    } 

     h1:hover, h2:hover, h3:hover, h4:hover, h5:hover, a:hover, .menu-panel a:hover { 
      color: #CC3300; 
     } 

.hr { 
    border: 1px dotted #C0C0C0; 
    border-top: 0px; 
} 

html { 
    height: 100%; 
} 

body { 
    height: 100%; 
    margin: auto; 
    overflow-x: auto; 
} 

form { 
    height: 100%; 
} 

p { 
    padding: 3px 0px 3px 0px; 
} 

html, body, input, select, textarea { 
    font-size: 12px; 
} 

input, select { 
    padding: 2px; 
    color: #333399; 
} 

    input[readonly] { 
     background-color: #FFFFFF; 
    } 

.error { 
    font-weight: bold; 
    font-size: 16px; 
    color: #CC3300; 
} 

::-webkit-scrollbar { 
    width: 8px; 
    height: 4px; 
} 

::-webkit-scrollbar- { 
    width: 8px; 
    height: 5px; 
} 

::-webkit-scrollbar-track { 
    background: #eee; 
    border: thin solid lightgray; 
    box-shadow: 0px 0px 3px #dfdfdf inset; 
    border-radius: 10px; 
} 

::-webkit-scrollbar-thumb { 
    background: #999; 
    border: thin solid gray; 
    border-radius: 10px; 
} 

    ::-webkit-scrollbar-thumb:hover { 
     background: #7d7d7d; 
    } 

.success { 
    color: #009933; 
    font-weight: bold; 
    font-size: 18px; 
    cursor: pointer; 
} 

.failure { 
    color: #CC3300; 
    font-weight: bold; 
    font-size: 18px; 
    cursor: pointer; 
} 

.vpad2 { 
    display: block; 
    padding: 2px 0px 2px 0px; 
} 

.vpad4 { 
    display: block; 
    padding: 4px 0px 4px 0px !important; 
} 

.vpad6 { 
    display: block; 
    padding: 6px 0px 6px 0px !important; 
} 

.vpad8 { 
    display: block; 
    padding: 8px 0px 8px 0px !important; 
} 

.vpad10 { 
    display: block; 
    padding: 10px 0px 10px 0px !important; 
} 

.vpad12 { 
    display: block; 
    padding: 12px 0px 12px 0px !important; 
} 

.vpad14 { 
    display: block; 
    padding: 14px 0px 14px 0px !important; 
} 


.vpad16 { 
    display: block; 
    padding: 16px 0px 16px 0px !important; 
} 

.right { 
    text-align: right; 
} 

.dirty { 
    border: 1px solid #FF9933 !important; 
} 


.center { 
    display: table; 
    margin: 0 auto; 
} 

textarea { 
    margin-left: 0px; 
    padding: 4px; 
} 

.info { 
    cursor: pointer; 
    display: block; 
    padding: 8px; 
    background-color: #DDEBB2; 
} 

.pink { 
    border: 1px solid #FF97FF; 
    padding: 6px; 
    background-color: #FFBBFF; 
} 

.red { 
    border: 1px solid #FF7D7D; 
    padding: 6px; 
    background-color: #FFB7B7; 
} 

.yellow { 
    border: 1px solid #FAD91F; 
    padding: 6px; 
    background-color: #FCEA81; 
} 

.purple { 
    border: 1px solid #E0B3FF; 
    padding: 6px; 
    background-color: #EFD7FF; 
} 

.green { 
    border: 1px solid #A3FF46; 
    padding: 6px; 
    background-color: #CCFF99; 
} 

.linkblock { 
    padding: 4px; 
    border-color: #E1E1E1; 
    border-style: none none dotted none; 
    border-width: 1px; 
    display: block; 
} 

input.date { 
    background: white url(../../Resource/Icons/calendar-16.png) no-repeat scroll; 
    background-position: 95% 50%; 
    padding-right: 16px; 
    cursor: pointer; 
} 

.description { 
    display: block; 
    font-weight: bold; 
    cursor: pointer; 
    padding: 8px; 
    background-color: #E0EDC0; 
    color: #333333; 
} 

    .description:hover { 
     background-color: #D2E6A1; 
    } 

.button { 
    margin-left: 2px; 
    padding: 2px; 
    height: 30px; 
    width: 100px; 
    color: #FFFFFF; 
    font-weight: bold; 
    background-color: #658A07; 
    border: 1px solid #60a338; 
} 


    .button:hover { 
     /*background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c)); 
    background: -moz-linear-gradient(center top, #8cb82b 5%, #9dce2c 100%);*/ 
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c'); 
     background-color: #8cb82b; 
     color: #FFFFFF; 
    } 

    .button:active { 
     position: relative; 
     top: 1px; 
     color: #FFFFFF; 
    } 
/* This imageless css button was generated by CSSButtonGenerator.com */ 

.valignmiddle tr td { 
    vertical-align: middle !important; 
} 


.linkbutton { 
    color: #9900CC !important; 
} 

.scrud-menu, .scrud-menu:visited { 
    cursor: pointer; 
    background-color: #658A07; 
    color: White; 
    text-decoration: none; 
    padding: 4px 8px 4px 8px; 
    border: 1px solid #658A07; 
    margin-right: 4px; 
} 

    .scrud-menu:hover { 
     background-color: #4E6B04; 
     border: 1px solid #4E6B04; 
     color: White; 
    } 




.grid { 
    background-color: #fff; 
    border-collapse: collapse; 
    cursor: pointer; 
    border: 1px solid #9dce2c; 
} 

    .grid tbody tr:hover, .grid tbody tr.alt:hover { 
     background-image: none; 
     background-color: #E0EDBE; 
    } 

    .grid tbody tr th { 
     border-style: none none none solid; 
     border-width: 1px; 
     border-color: #CDE38A; 
     height: 18px; 
     padding: 4px; 
     color: #FFFFFF; 
     background-color: #658A07; 
     padding-left: 12px !important; 
    } 


table.grid th[scope=col] { 
    text-align: left; 
    padding: 4px; 
} 


.grid a { 
    text-decoration: none; 
    color: White; 
} 

.grid td { 
    font-size: 8pt; 
    height: 24px; 
    vertical-align: middle !important; 
    padding: 2px; 
    padding-left: 8px !important; 
    border: 1px solid #CDE38A; 
    color: #717171; 
} 


.grid tbody tr { 
    height: 18px; 
} 


    .grid tbody tr.alt { 
     background: #EFF5E1; 
    } 


.pager { 
    margin: 8px 0px 8px 4px; 
} 

    .pager a, .pager span { 
     padding: 4px 8px 4px 8px; 
     border: 1px solid #557504; 
     background-color: #658A07; 
     text-decoration: none; 
     color: #FFFFFF; 
    } 

     .pager a:hover, .pager span { 
      cursor: pointer; 
      border-color: #57960B; 
      background-color: #66AD10; 
      color: #FFFFFF !important; 
     } 

.ajax-container { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #A7D0D9; 
    opacity: .5; 
} 

.ajax-loader { 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -32px; /* -1 * image width/2 */ 
    margin-top: -32px; /* -1 * image height/2 */ 
    display: block; 
    opacity: 0.9; 
} 


.form { 
    border: 1px solid #E0DBF2; 
    background-color: #DDEBB2; 
    padding: 12px; 
    width: 670px; 
} 


.form-error { 
    color: #CC3300; 
    padding: 4px 0px 4px 0px; 
    font-weight: bold; 
} 

.form input, .form select, .form textarea { 
    outline: none; 
    color: #5A5A87; 
    padding: 2px; 
} 

.form input { 
    padding: 3px; 
} 

.form table tr td { 
    padding: 2px !important; 
} 

.form textarea, .form input[type="text"], .form input[type="number"], .form input[type="date"], .form select { 
    border: 1px solid #E1DBEE; 
    width: 414px; 
} 

.form select { 
    width: 422px; 
} 


.form input[type="submit"], .form input[type="reset"], .form input[type="button"] { 
    width: 100px; 
    color:#FFFFFF; 
} 

.form input[type="date"] { 
    width: 140px; 
} 

.form input[type="radio"], .form input[type="checkbox"] { 
    margin: 4px; 
} 

.label-cell { 
    width: 210px !important; 
} 

label { 
    cursor: pointer; 
    width: 328px !important; 
} 

.sign-in-logo { 
    width: 375px; 
    margin: auto; 
    margin-top: 170px; 
} 

a img { 
    border: none; 
} 

.sign-in { 
    width: 350px; 
    margin: auto; 
    height: 280px; 
    background-color: #F0F0F0; 
    padding: 12px; 
} 

    .sign-in input[type='text'], .sign-in input[type='password'] { 
     width: 150px; 
    } 

    .sign-in select { 
     width: 158px; 
    } 

    .sign-in:hover { 
     background-color: #F0F0E0; 
    } 

input[type=checkbox], input[type=radio] { 
    vertical-align: middle; 
    position: relative; 
    bottom: 2px; 
    margin-right: 4px; 
} 

#GridPanel { 
    min-width: 400px; 
    max-width:760px; 
    overflow: auto; 
} 

我在做什麼錯誤？？

Answer 1

你的表被包裹在以下DIV：<div id="GridPanel" style="width: 1563px; overflow: auto;">

你有1563px內嵌固定的CSS寬度和在main.css的行506你有max-width: 760px;和min-width: 400px;。 由於你的寬度高於你的最大寬度，所以你的最大寬度將被使用，你的最小寬度將永遠不會被使用。

如果您使用百分比單位而不是像素來設置寬度，那麼它將使用屏幕調整大小並停在min-width處。

例：<div id="GridPanel" style="width: 95%; overflow: auto;">