javascript - 使用 Firefox 加载网页时无法正常显示

Question

我要降低网页高度， 这样整个页面都会暴露出来，除了底部页面的一部分紫色。 我认为底部页面的紫色部分是html标签 而他是不必要的。 非常感谢。 链接:http://www.centerwow.com/window1/window/window.html

CSS 代码:

html{
height:0px;
}


body {
    //overflow:hidden;
    font-family:Palatino Linotype;
    background: none repeat scroll 0 0 #6000CC;
    font-family: Arial;
    font-size: 12px;
    margin: 0px 0px 0px 0px;
    padding: 0px 0px 0px 0px;
    height:600px;

}
 .insidWindow {
    background: none repeat scroll 0 0 #ffFFFF;
    margin: 0px auto 10px auto;
    padding: 10px;
    position: relative;
    top:-515px;
    width:52.5%;
}
h2 {


    color: #443333;
    font-size: 14px;
    line-height: 7px;
    margin: 0px 5px 0px 5px;
    padding: 5px;
    color: white;
}
.lineAzure{
    background: #0066ff;
    line-height: 7px;
    margin: 0px 0px 0px 0px;
    height:15px;
}
#lineAzurebotom {
    background: none repeat scroll 0 0 #880000;
    line-height: 11px;
    margin: 0;
    position: relative;
    top: -516px;
}
#leftcolumn_s {
    background: none repeat scroll 0 0 #DDFF00;
    height: 115px;
    margin: 0 auto 0 auto;
    padding: 10px;
    position: relative;
    top: 360px;
    width: 88%;
}
#rightcolumn_s{
background: none repeat scroll 0 0 #DDFF00;
    height: 115px;
    margin: 0 auto 0 auto;
    padding: 10px;
    position: relative;
    top: 360px;
    width: 88%;
}

#chatRead {
    background: none repeat scroll 0 0 #88FF00;
    line-height: 90px;
    margin: 0 auto;
    position: relative;
    top: -520px;
    width: 55%;
}
#chatWrite {
    background: none repeat scroll 0 0 #88FFFF;
    line-height: 25px;
    margin: 0 auto;
    position: relative;
    top: -520px;
    width: 55%;
}

#lineYelow{
    background: #00FFFF;
    border-bottom: 4px solid #00ffff;

    line-height: 7px;
    margin: 0px 0px 0px 0px;

    height:35px
}
#wrapMein{
    background: green;
    //overflow:hidden;
    margin: 0px 5px 20px 5px;
    padding: 0px 0px 0px 0px;
    position: relative;
    height:530px;
}
.column {
    background: none repeat scroll 0 0 #DDFFFF;
    height: 505px;
    margin: 5px;
    padding: 0 5px;
    position: relative;
    top: -15px;
    width: 20%;
}
.rcolumn{
    background: none repeat scroll 0 0 #ddffff;
    margin: 0px 0px 0px 0px;
    padding: 10px;
    position: relative;
    width:20%;
    height:495px;
    position:relative;
    top:-528px;
    float:right;

}
.ui-wrapper {
    border: 2px solid #70A029;
}

.ui-resizable {
    position: relative;
}

.ui-resizable-e {
    background: url("../pic/resizable-e.gif") repeat scroll right center transparent;
    cursor: e-resize;
    height: 100%;
    right: 0;
    top: 0;
    width: 6px;
}
.ui-resizable-handle {
    display: none;
    font-size: 0.1px;
    position: absolute;
}
.ui-resizable-s {
    background: url("../pic/resizable-s.gif") repeat scroll center top transparent;
    bottom: 0;
    cursor: s-resize;
    height: 6px;
    left: 0;
    width: 100%;
}
.ui-resizable-se {
    background: url("../pic/resizable-se.gif") repeat scroll 0 0 transparent;
    bottom: 0;
    cursor: se-resize;
    height: 9px;
    right: 0;
    width: 9px;
}

html代码:

<h2>this is body background.</h2>
<div class="lineAzure">this is div class lineAzure </div>
<div id="lineYelow">this is div id  YineYelow</div>
<div id="wrapMein">
<div class="lineAzure" style="margin: 0px 22.6% 0px 22.6%;" "width:52.5%" >this div classlineAzurespnbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;|</div>
<div id="leftcolumn" class="column">here is div id = leftcolumn
<div id="leftcolumn_s">here is div id = leftcolumn_s</div>
</div>
<div id="rightcolumn" class="rcolumn">rightcolumn
<div id="rightcolumn_s">here is div id = rightcolumn_s</div>
</div>
<div class="insidWindow">
    <div id="windowResize" class="ui-wrapper" style="height: 340px; width: 350px;">
        <div style="position: absolute; top: 20px; left: 20px; " >
            Resize me<br>
            Please try to resizeme:<br> www www www.
        </div>
    </div><br>
    </div><!--insidWindow-->
    <div id="chatRead">here is div id = chatread</div>
    <div id="chatWrite">here is div id = chatWrite</div>
    <div id="lineAzurebotom">here is div id = lineAzurebotom</div>
</div><!--wrapMein-->

Answer 1

如果我正确理解你的问题，请将 overflow: hidden; 添加到你的 #wrapMein id。

额外的高度(和紫色间距)来自您的页面内容从负 position: relative 内部 div(-520px 等)创建的布局，它仍然计入您的盒子模型值在火狐中。