Javascript 管理窗口重定尺寸
我目前正在开发一个工具栏,但我遇到了一些问题。 我的想法是,如果我的窗口是全屏的,一切都是好的,但是当窗口被重新定尺寸时,我的按钮就会出现在工具栏的底线上 重要的是,我的工具栏的高度为20px。所以通常情况下,按钮不能超过20px 有人知道我该怎么解决这个问题吗 您的工具栏代码: CSS代码:Javascript 管理窗口重定尺寸,javascript,jquery,css,Javascript,Jquery,Css,我目前正在开发一个工具栏,但我遇到了一些问题。 我的想法是,如果我的窗口是全屏的,一切都是好的,但是当窗口被重新定尺寸时,我的按钮就会出现在工具栏的底线上 重要的是,我的工具栏的高度为20px。所以通常情况下,按钮不能超过20px 有人知道我该怎么解决这个问题吗 您的工具栏代码: CSS代码: .yourToolbarBody { height: 20px; -webkit-user-select: none; } body { /* This step is to e
.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;
}
如果使用DIV作为定位方式,则可以将其设置为
.yourDivClass {
float:left;
}
或者你可以选择位置:绝对,如果你现在想把它们放在哪里
如果您这样做,并且包装器允许这样做,那么它将继续向右侧添加div,但是如果没有任何示例代码,则很难提供帮助。您需要发布工具栏的代码。在没有看到的情况下无法告诉您代码有什么问题。您的布局的一些示例代码会很好,这样人们就可以知道您是否使用div、tables或任何其他布局。您还需要添加HTML代码来显示包装类和元素定义EP我使用的是float an div:s