css - 放大时页脚向左移动

标签 css html

这是第一张页脚在右下角的图片。
第一个通缉地点
http://i.imgur.com/fbS8mWD.png

当我放大时，会出现滚动条并且页脚会向左移动。
第二个不需要的缩放位置
http://i.imgur.com/BrEBA0G.png

我不能做太多的编辑，因为开发人员头脑冷静，不会理解大的变化。

如何解决定位问题？

/* Genral Styles */
table, td
{
    border-style: none;
    border-color: inherit;
    border-width: 0;
    margin-left: 2px;
    font-family: Arial;
}

.GridAltItem1:hover
{
    color: white;
    cursor: hand;
    font-weight: bolder;
    border: 5px solid;
    font-family: Arial;
}
.GridAltItem1nohover
{
    cursor: hand; /* font-weight: bolder;*/
    font-family: Arial;
}
.AjaxCalendar .ajax__calendar_container
{
    border: 1px solid #646464;
    background-color: #C5BEE9 color: red;
}
.ob_iTIE
{
    height: 500px;
    line-height: 500px;
}

.GridAltItem1
{
    background-color: White;
    font-family: Arial;
}
.GridAltItem2nohover
{
    cursor: hand;
    font-weight: normal;
    font-family: Arial;
}
.GridAltItem2:hover
{
    color: white;
    cursor: hand;
    font-weight: bolder;
    border: 5px solid;
    font-family: Arial;
}
.GridAltItem3:hover
{
    color: #FFEF3d;
    cursor: hand;
    font-weight: bolder;
    border: 5px solid;
    font-family: Arial;
}
.GridAltItem4:hover
{
    color: #FFEF3d;
    cursor: hand;
    font-weight: bolder;
    border: 5px solid;
    font-family: Arial;
}
.Gridboxsm
{
    color: purple;
    width: 60px;
}
.width795
{
    width: 795px;
}
.width10percent
{
    width: 10%;
}

.width45percent
{
    width: 45%;
}

.width95percent
{
    width: 95%;
}

.width100percent
{
    width: 100%;
}

.height100percent
{
    height: 100%;
}


.aligncenter
{
    text-align: center;
}

.alignleft
{
    text-align: left;
}

.alignright
{
    text-align: right;
}

A:link
{
    font-weight: normal;
    font-size: 12pt;
    color: black;
    font-family: arial;
    text-decoration: underline;
}
A:visited
{
    font-weight: normal;
    font-size: 12pt;
    color: black;
    font-family: arial;
    text-decoration: none;
}
A:hover
{
    font-weight: bold;
    font-size: 12pt;
    color: black;
    font-family: arial;
    text-decoration: underline;
}
A:active
{
    font-weight: normal;
    font-size: 12pt;
    color: black;
    font-family: arial;
    text-decoration: none;
}

.clickable
{
    cursor: hand;
    cursor: pointer;
}

/* Body Styles */

.clsbody
{
    background-color: White;
    margin-top: 0px;
}


.footerRow 
{
     font-size: small;
    font-family: Arial;
   text-align: center; 
   /* margin-left:450px; */
    /*position:absolute;*/
    bottom: 10px; 
}
.footerBackground
{
    background-repeat: no-repeat;
    background-position: center;
}
.footer, a.footer:active, a.footer:link, a.footer:visited
{
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif;
    font-size: xx-small;
    text-align: center;
    text-decoration: none;
}
a.footer:hover
{
    text-decoration: underline;
}
.copyright
{   font-family  : Arial;
	font-size: small;
	color: #02a194; 
	text-align: center;
}

/* DIV Styles */
DIV.clsDivHidden
{
    visibility: hidden;
    display: none;
}

DIV.clsDivVisible
{
    visibility: visible;
}
DIV.clsDivCust
{
    background-color: #A398dc;
    font-family: arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    border-right: thin outset;
    border-top: thin outset;
    border-left: thin outset;
    border-bottom: thin outset;
}
DIV.clsDivCustSecond
{
    font-family: arial;
    font-size: 14pt;
    font-weight: bold;
    text-align: center;
    color: #02A194;
}
DIV.clsDivHead
{
    background-color: #FFCC99;
    text-align: center;
    border-right: thin outset;
    border-top: thin outset;
    border-left: thin outset;
    border-bottom: thin outset;
}

/* Buttons */
input.btn
{
    font-weight: bold;
    cursor: hand;
    color: black;
    background-color: #FFFFFF;
}
input:-webkit-autofill
{
    -webkit-box-shadow: 0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus
{
    -webkit-box-shadow: /*your box-shadow*/ ,0 0 0 50px white inset;
    -webkit-text-fill-color: #333;
}


.clsoption
{
    white-space: pre;
}

.submitbutton
{
    font-weight: bold;
    cursor: hand;
    color: black;
    background-color: #C5BEE9; /* #C5BEE9*/
}
.submitbutton1
{
    font-weight: bold;
    cursor: hand;
    color: white;
    background-color: #937FF5;
}
.submitbutton2
{
    font-weight: bold;
    cursor: hand;
    color: black;
    background-color: #C5BEE9; /* #C5BEE9*/
}
.submitbutton3
{
    font-weight: bold;
    cursor: hand;
    background-color: #E6E6F0;
    border-style: Solid;
    border-color: black;
    border-width: 1px;
    font-size: x-small;
    height: 20;
}
.passwordbutton
{
    font-weight: bold;
    cursor: hand;
    color: black;
    background-color: #C5BEE9;
}
.gridtbutton
{
    border-style: Solid;
    border-color: black;
    border-width: 1px;
}
.gridbtn1
{
    font-weight: bold;
    cursor: hand;
    background-color: #eef;
    border-style: solid;
    border-color: Black;
    border-width: 1px;
    padding-top: 2px;
}
.gridbutton
{
    font-weight: bold;
    cursor: hand;
    color: black;
    background-color: #eef;
}
.srcbutton
{
    font-weight: lighter;
    cursor: hand;
    color: purple;
    font-family: Arial;
}

.submitbutton:hover
{
    border: 1px solid black;
    background: #FFF4C1;/*#F5E964;*/ /*#ded35e;*/
    cursor: hand;
    cursor: pointer;
    color: Black; /*white*/
    font-family: Arial;
}
.submitbutton1:hover
{
    border: 1px solid black;
    background: #ded35e; 
    cursor: hand;
    cursor: pointer;
    color: White;
    font-family: Arial;
}
/* Grid Styles */
.gridheader
{
    font-weight: bold;
    font-size: 11px;
    font-family: Verdana;
    background-color: #e8e3a9;
    text-align: left;
    color: black;
    cursor: hand;
    border-right: thin outset;
    border-top: thin outset;
    border-left: thin outset;
    border-bottom: thin outset;
}
.gridtop
{
    background-color: #9589D7;
    font-weight: bold;
    color: Black;
    text-align: center;
}

.gridhdr
{
    font-weight: bold;
    font-size: 16px;
    font-family: Arial;
    text-align: left;
    color: #eef;
    cursor: hand;
     
}
.gridhdrsm
{
    font-weight: bold;
    font-size: 14px;
    font-family: Arial;
    text-align: left;
    color: #eef;
    cursor: hand;
}
.gridhdrright
{
    font-weight: bold;
    font-size: 16px;
    font-family: Arial;
    text-align: Right;
    color: #eef;
    cursor: hand;
}


.gridrow
{
    border-right: black 2px;
    border-top: black 2px;
    font-size: 11px;
    border-left: black 2px;
    color: #000000;
    border-bottom: black 2px;
    font-family: Verdana, Arial, Helvetica; /* background-color: #ffffe0;  	background-color:#eee8aa */
}

.gridrowselected
{
    border-right: black 2px;
    border-top: black 2px;
    font-size: 11px;
    border-left: black 2px;
    color: black;
    border-bottom: black 2px;
    font-family: Verdana, Arial, Helvetica;
    background-color: darkkhaki; /*  background-color:white */
}


/* Table styles */
.MasterTbl
{
    border: solid 1px #2E8B57;
    width: 795px;
}
.MasterHeader
{
    font-family: arial;
    font-size: 18pt;
    font-weight: bold;
    text-align: center;
    color: #02a194;
}
.mastersub
{
    height: 124px;
}
.tblbox
{
    border: solid 1px #a398dc;
    background-color: #E6E6F0;
    margin: 0 auto;
}

.tblbox1
{
    border: solid 1px black;
    background-color: #a398dc;
    font-weight: bold;
    margin: 0 auto;
}

.tblbox2
{
    border: solid 1px #a398dc;
    background-color: #FFFFFF;
    height: 22px;
    width: 400px;
    font-size: small;
}

.tblbox3
{
    border: solid 1px #a398dc;
    background-color: #E6E6F0;
    margin: 0 auto;
    width: 700px;
    padding: 5;
}
.tblbox4
{
    background-image: url('../../Images/Graduatecap2.png');
    background-repeat: repeat-x;
}

.tblbox41
{
    background-image: url('../../Images/Graduatecap.png');
    background-repeat: repeat-y;
}
.tbl4
{
    margin: 0 auto;
    width: 90%;
    padding: 5px;
}
.tbl5
{
    margin: 0 auto;
}

TR.classRow
{
    background-color: beige;
}

TD.clsTDHeader
{
    font-weight: bolder;
    font-size: 11px;
    color: black;
    font-family: Verdana;
    background-color: #e8e3a9;
    border-right: #999999 2px outset;
    border-top: #e4ecf5 1px outset;
    border-left: #e4ecf5 1px outset;
    border-bottom: #adc3e4 1px outset;
    cursor: hand;
}




TD.clsTDData
{
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica;
}

TD.clsTDLabel
{
    text-align: right;
    background-color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    font-size: 12pt;
    color: black;
    font-family: arial;
}

TD.clsTDLabelLeft
{
    text-align: left;
    background-color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    font-size: 10pt;
    color: black;
    font-family: arial;
}

TD.clsTDLabelBold
{
    font-size: 12px;
    font-family: Verdana, Arial, Helvetica;
    color: #2E8B57;
    text-align: right;
}


TD.clsTDValue
{
    font-size: 12px;
    color: #02A194;
    font-family: Verdana, Arial, Helvetica;
}

TD.clsTDRed
{
    font-size: 12px;
    color: red;
    font-family: Verdana, Arial, Helvetica;
}

TR.clsTabHeader
{
    font-weight: bolder;
    font-size: 1px;
    color: white;
    font-family: Sans-Serif;
    background-color: #B6A467;
    text-align: center;
    height: 8px;
    width: 100%;
}
/* Title Styles */
.PageTitle
{
    font-size: 15pt;
    font-weight: bold;
    color: #2E8B57;
    font-family: arial;
    text-align: center;
}
.PageFooter
{
    height: 40px;
    background-color: #A398DC; /*#8A75FF;*/
}

.SubtitleCenter
{
    font-weight: bold;
    font-size: 12pt;
    color: black;
    font-family: arial;
    padding-top: 0px;
    padding-bottom: 0px; /*	padding-left: 10px;*/
    background-color: White;
    text-align: center;
}
.SubtitleCenter1
{
    font-weight: bold;
    font-size: 12pt;
    color: #02a194;
    font-family: arial;
    background-color: White;
    text-align: center;
    width: 100%;
}
.SubtitleCenter3
{
    font-size: 13pt;
    color: black;
    font-family: arial;
    padding-top: 0px;
    padding-bottom: 0px; /*	padding-left: 10px;*/
    background-color: White;
    text-align: center;
}
.SubtitleLeft
{
    font-weight: bold;
    font-size: 12pt;
    color: black;
    font-family: arial;
    padding-top: 0px;
    padding-bottom: 0px;
    padding-left: 10px;
    background-color: white;
    text-align: left;
}

.banner
{
    background-image: url('../../Images/great-filler.jpg');
    text-align: center;
}

.portletTitle_l
{
    background-image: url(/ecjcgreat/images/tab_green_l_vi_shrink.gif);
    background-repeat: no-repeat;
    width: 6px;
    height: 20px;
    background-color: white;
}
.portletTitle_r
{
    background-image: url(/ecjcgreat/images/tab_green_r_vi_shrink.gif);
    background-repeat: no-repeat;
    width: 6px;
    background-color: white;
}
.portletTitle
{
    background-image: url(/ecjcgreat/images/tab_green_m_vi.gif);
    background-repeat: repeat-x;
    font-size: small;
    font-weight: bold;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; /* 'Bernard MT Condensed' */
    color: #004400;
    background-color: white;
    width: 90px;
}
.portletTitle_l_sel
{
    background-image: url(/ecjcgreat/images/tab_green_l_vi_shrink_2.gif);
    width: 6px;
    height: 20px;
    background-color: white;
}
.portletTitle_r_sel
{
    background-image: url(/ecjcgreat/images/tab_green_r_vi_shrink_2.gif);
    background-repeat: no-repeat;
    width: 6px;
    background-color: white;
}
.portletTitle_sel
{
    background-image: url(/ecjcgreat/images/tab_green_m_vi_2.gif);
    background-repeat: repeat-x;
    font-size: small;
    font-weight: bold;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; /* 'Bernard MT Condensed' */
    color: #004400;
    background-color: white;
    width: 90px;
}

/* TEXT PROPERTIES */

.text_table
{
    font-size: 9pt;
    color: #484848;
    font-family: Verdana, Arial, Helvetica;
    padding: 5px;
}

.text_table_font
{
    font-size: 10pt;
    color: #484848;
    font-weight: bold;
    font-family: Verdana, Arial, Helvetica;
    padding: 3px;
}
.text_font
{
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica;
}

.login_header
{
    font-weight: bold;
    font-family: Arial;
    font-size: medium;
    color: purple;
    background-color: White;
    /*text-align: center;*/
}
.login_txt
{
    font-weight: bold;
    font-family: Arial;
    font-size: small;
    text-align: right;
    color: purple;
    background-color: White;
   /* width: 64%;*/
}

h2.portletTitleText
{
    font-size: 9pt;
    font-weight: bold;
    font-family: Verdana, Arial, Geneva, Helvetica, sans-serif; /* 'Bernard MT Condensed' */
    color: #004400;
    text-align: center;
}

TD.clsRadiolabel
{
    background-color: #ffffff;
    vertical-align: middle;
    font-weight: bold;
    font-size: 10pt;
    color: black;
    font-family: arial;
}

.TextWOBorder
{
    border-right: 0px solid;
    border-top: 0px solid;
    border-left: 0px solid;
    border-bottom: 0px solid;
    font-size: 8pt;
    font-family: Verdana, Arial, Helvetica;
    vertical-align: middle;
}


TD.clsTDFont
{
    font-size: 10px;
    font-family: Verdana, Arial, Helvetica;
    text-align: left;
}


.linkbutton
{
    font: bold 11px Arial;
    text-decoration: none;
    background-color: #e8e3a9;
    color: black;
    border-top: #e8e3a9 1px outset;
    border-right: #e8e3a9 1px outset;
    border-bottom: #e8e3a9 1px outset;
    border-left: #e8e3a9 1px outset;
    padding-right: 10px;
    padding-left: 10px;
    text-align: center;
}


.linkbutton:hover
{
    border: 1px solid orange;
    background: #B6A467;
    cursor: hand;
    cursor: pointer;
    color: White;
}

select
{
    margin-left: 0px;
    margin-top: 0px;
}


/*::-moz-selection
{
    background: #0C0;
    color: #f00;
}
::selection
{
    background: #6374AB;
    color: #F00;
}*/


option
{
    width: 100px;
}

#Table1
{
    height: 34px;
}
.style2
{
    width: 64%;
    font-family: Arial;
}
.style3
{
    color: Black;
    font-family: Arial;
}

.style4
{
    width: 240px;
    height: 97px;
    font-family: Arial;
}
.style5
{
    width: 775px;
    height: 97px;
    font-family: Arial;
}
.style6
{
    width: 240px;
    height: 97px;
    font-family: Arial;
}
.style7
{
    width: 455px;
    font-family: Arial;
}
.style31
{
    color: purple;
    font-family: Arial;
}
.style32
{
    color: purple;
    width: 20px;
    font-family: Arial;
}
.style40
{
    width: 185px;
    color: purple;
    font-weight: bold;
    font-size: medium;
    font-family: Arial;
}
.style41
{
   /* width: 185px;*/
    color: purple;
    font-family: Arial;
}
.style411
{
    width: 200px;
    color: White; /* #937FF5; */
    font-weight: bold;
    font-size: medium;
    font-family: Arial;
}
.style413
{
    width: 275px;
    color: purple;
    font-family: Arial;
}
.style414
{
    width: 25px;
    color: purple;
    font-family: Arial;
}
.style415
{
    width: 450px;
    color: purple;
    font-family: Arial;
}
.style417
{
    width: 400px;
    color: white; /* #937FF5; */
    font-weight: bold;
    font-size: medium;
    font-family: Arial;
}
.style418
{
    width: 185px;
    color: purple;
    font-size: medium;
    height: 40px;
    font-family: Arial;
}
.style42
{
    width: 75px;
    font-family: Arial;
}
.style43
{
    width: 175px;
    font-family: Arial;
}
.style44
{
    width: 250px;
    color: #02A194;
    font-family: Arial;
}
.style45
{
    width: 30px;
    color: Purple;
    font-family: Arial;
}
.style46
{
    width: 400px;
    color: red;
    font-family: Arial;
}


.style51
{
    height: 26px;
    width: 165px;
    font-family: Arial;
}
.style52
{
    width: 643px;
    font-family: Arial;
}
.style61
{
    width: 300px;
    font-family: Arial;
}
.style99
{
    color: green;
    background-color: #eef;
    font-family: Arial;
}
.style991
{
    color: black;
    background-color: #eef;
    font-family: Arial;
}
.style100
{
    color: purple;
    width: 387px;
    font-family: Arial;
}
.style101
{
    width: 201px;
    color: purple;
    font-family: Arial;
}
.style102
{
    width: 306px;
    color: purple;
    font-family: Arial;
}
A:link
{
    text-decoration: none;
}
A:visited
{
    text-decoration: none;
}
A:active
{
    text-decoration: none;
}
A:hover
{
    text-decoration: none;
}

/*Menu Classes*/
.has-popup
{
    padding: 5px 0;
}
.level2
{
    padding: 5px 15px;
}
.level3
{
    padding: 5px 15px;
    background-color: #DDDDF9;
    border: 1px solid #ccd;
}
.has-popup, .level2
{
    border: 1px solid #ccd;
    background-color: #eef;
}

.dynamic
{
}
<div id="footer1">
            <table width="97%">
                <tbody><tr>
                    <td style="width: 95%;">
                    </td>
                    <td nowrap="nowrap">
                        <font color="#02a194">© 2013 TEST TEST TEST </font>
                    </td>
                </tr>
            </tbody></table>
        </div>

最佳答案

此代码将修复您的代码:

.footer1{
 position:relative;
 width:100%;
 bottom: 0px 

 }

一些提示:

html5 引入了一些新标签，其中之一是页脚标签，这是向页面添加页脚的最佳方式，所以与其使用带有 footer1 类的 div，不如使用“footer”标签。这里引用:http://www.w3schools.com/tags/tag_footer.asp

如果您发布链接到您需要修复的 html 内容的 css，请在您发布问题时更好，因为您在此处发布了整个 css 代码，而我们只需要 .footer1 代码!

祝你好运!

关于css - 放大时页脚向左移动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32229136/

上一篇：javascript - 粘性标题不工作-javascript

下一篇：javascript - 展开所有菜单并关闭它们

相关文章：

html - 正文元素不在页面顶部

html - 在 Bootstrap 行中垂直对齐按钮组

html - 如何为特定的 IE 版本应用 css 值

html - 在斜杠 (/) 上打断 HTML 文本的最佳方法是什么？

javascript - 如何使表没有固定 <thead> 标题

html - 通过 html 设置 css 值？

javascript - 通过前端进行缓存控制？

javascript - 使用 onclick 功能按钮更改选择选项下拉列表

jQuery 在图像之间切换

css - 在 IE7 中错误定位绝对 div

©2024 IT工具网  联系我们