FirefoxでWebページを読み込む際に通常通り表示されない

Question

高さのWebページを小さくする必要があります。 ページ全体が、下のページの紫色の部分を除いて公開されるようにします。 ボトムページの紫色部分は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

私が正しくあなたの質問を理解していれば、あなたの#wrapMein IDにoverflow: hidden;を追加します。

追加の高さ（および紫色の間隔）は、ページコンテンツがFirefoxのボックスモデル値にカウントされている負のposition: relative内部div（-520pxなど）から作成したレイアウトから来ています。