管理窗口redimension

Question

我目前正在開發一個工具欄，但我遇到了問題。 嘛認爲，如果我的窗口是全屏幕上一切正常，但是當窗戶被redimensioned，然後我在按鈕我的工具欄的底線去...

重要的東西是我的工具欄有20px的高度。所以通常按鈕不能走得更遠，然後20px

有人知道我該如何解決這個錯誤？

yourToolbar代碼：

CSS代碼：

.yourToolbarBody 
{ 
    height: 20px; 
    -webkit-user-select: none; 
} 

body 
{ 
    /* This step is to escape all the top css style from body webpage */ 
    position: fixed; 
    width: 100%; 
    height: 100%; 

    /* Then reset it to relative to show the scrollbar */ 
    position:relative; 
} 

a 
{ 
    margin-left: 4px; 
    float: left; 
} 

.button 
{ 
    position:relative; 
    float: left; 

    top: -3px; 

    border-radius: 3px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    border-width: thin; 
    padding-bottom: 2px; 
    padding-top: 2px; 

    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-shadow: 0 1px 1px rgba(0,0,0,.5); 

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #000; 
    border: solid 1px #000; 
} 

button label 
{ 
    vertical-align: super; 
    cursor: pointer; 
} 

#clear 
{ 
    clear: both; 
    display: none; 
} 

#closeButton 
{ 
    float: right; 
} 

#closeButton a 
{ 
    padding-left: 30px; 
    background-image: url(../images/close.png); 
    background-repeat: no-repeat; 
} 

#dropMenu 
{ 
    top: 39px; 
    left: 0; 
    overflow: hidden; 
    /*background-color: #E5E5E5;*/ 
    margin: 0; 
    padding: 0; 
    position: fixed; !To do not move the toolbar when scrolling 
    border: none; 
    /*-webkit-box-sizing: content-box;*/ 
    z-index: 99999999; 
    border-radius: 0 0 6px 6px; 

    background: #ffffff; 
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#E5E5E5)); 
    background: -moz-linear-gradient(top, #ffffff, #E5E5E5); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff", endColorstr="#E5E5E5"); 
} 

.dropMenuButton input 
{ 
    vertical-align : super; 
    padding-left : 2px; 
    padding-right : 2px; 
} 

.dropMenuButton 
{ 
    position:relative; 
    float: left; 

    top: -1px; 

    height: 20px; 

    border-radius: 3px; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    border-width: thin; 
    padding-bottom: 2px; 
    padding-top: 2px; 

    display: inline-block; 
    outline: none; 
    cursor: pointer; 
    text-shadow: 0 1px 1px rgba(0,0,0,.5); 

    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    box-shadow: 0 1px 2px rgba(0,0,0,.2); 
    color: #000; 
    border: solid 1px #000; 

    text-decoration: none; 
    display: inline-block; 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    font-size: 80%; 

    background: white; 
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(#D7D7D7)); 
    background: -moz-linear-gradient(top, white, #D7D7D7); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="white", endColorstr="#D7D7D7"); 
} 

.dropMenuButton:hover 
{ 
    background: #D7D7D7; 
    background: -webkit-gradient(linear, left top, left bottom, from(#D7D7D7), to(white)); 
    background: -moz-linear-gradient(top, #D7D7D7, white); 
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#D7D7D7", endColorstr="white"); 
} 

/* To center the text with the image */ 
.dropMenuLabel 
{ 
    /* Changer Later */ 
    color: white; 

    text-shadow: 0 1px 1px rgba(0,0,0,.5); 
    cursor: pointer; 
    padding: 0 5px 0 5px; 
    vertical-align:super ; 
} 

/* To hide the border */ 
iframe 
{ 
    border: 0px solid #ffffff; 
} 

input 
{ 
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
} 

.go 
{ 
    cursor: pointer; 
    margin-left: -4px; 
    height: 24px; 
} 

.imageButton 
{ 
    float: left; 
} 

.inButtonImage 
{ 
    height: 15px; 
} 

#searchForm 
{ 
    float: left; 
    vertical-align: middle; 
    margin-left: -3px; 
} 

#searchForm img 
{ 
    margin-left : 10px; 
    vertical-align: middle; 
    margin-bottom: 2px; 
} 

#searchForm input 
{ 
    vertical-align: middle; 
} 

.separator 
{ 
    width: 1px; 
    height: 16px; 
    margin: 5px 3px 0; 
    border-left: 1px solid #ABC6D7; 
    background:#fff; 
    float: left; 
} 

.textButton 
{ 
    position:relative; 
    float: left; 
    cursor: pointer; 

    top: -2px; 
    margin-left: 4px; 

    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
    border-width: thin; 
    padding-bottom: 2px; 
    padding-top: 2px; 
    border-style: none; 
} 

#YourToolbarFrame 
{ 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 39px; 
    overflow: hidden; 
    background-color: #E5E5E5; 
    margin: 0; 
    padding: 0; 
    position: fixed; 
    /*border: 1px solid #BDC8D6;*/ 
    border: none; 
    -webkit-box-sizing: content-box; 
    z-index: 99999999; 
} 

Answer 1

如果您正在使用DIV作爲您定位的方式，那麼你可以將它們設置爲

.yourDivClass { 
float:left; 
} 

或者你可以與位置：絕對，如果你現在在哪裏放置它們。

如果你這樣做，你的包裝允許它，然後它會繼續添加到右邊的div，但它真的很難幫助沒有任何示例代碼。