現在、画面のコードは完璧に見えますが、何らかの理由で、ブラウザのサイズをフルスクリーンから小さなウィンドウに変更するたびに、すべてのナビゲーションバーがヘッダー div の下やその他の下に移動します。フッターにも何かを追加する場合、どのようにサイズを変更してもページが同じになるように設定するにはどうすればよいですか。フルスクリーンモードのみに固定されていてもかまいません。
もう 1 つの問題は、友人に彼のラップトップでウェブサイトをチェックするように頼んだとき、画面の解像度が原因ですべてめちゃくちゃだったと思いますが、モニターで見たときは完全に問題なく見えました. だから私は混乱していて、この問題を解決する方法がわかりません。できる限り調査しましたが、試したことはすべてうまくいきませんでした。
だから私がやろうとしているのは、ウェブサイトが修正され、フルスクリーンでしか表示できないことを確認することだけです. サイズを小さくすると、ページの一部が見えなくなり、それだけです。
あなたが私を助けてくれれば、それは素晴らしいことです！
http://jsfiddle.net/thNRs/ ---------------->JSFiddle DEMO。これを使用すると、問題がすぐにわかります。
HTML コード:
<body>
<div id="page">
<div id="header">
<a href="http://wireless.fm.intel.com/test/index.php"><img src="http://wireless.fm.intel.com/test/logo2.png" border=0></a>
<h2><a href="http://moss.ger.ith.intel.com/sites/MWG-IS/Pages/Default.aspx" border=0>Mobility Group</a></h2>
<div id="navigation">
<a href="#">About</a>
<a href="#">Reports</a>
<a href="#">Documents</a>
<a href="#">Checklists</a>
<a href="#">License Tools</a>
<a href="#">Presentations</a>
<a href="#">Software Releases</a>
</div>
</div>
<div id="main"></div>
<div id="footer">
<!--<h4>WNG Product Development Engineering (US)</h4>
<a href="https://employeeportal.intel.com/irj/portal">Circuit</a>
<a href="#">Contact Us</a>-->
</div>
</div>
</body>
CSS コード:
html, body
{
padding:0;
margin:0;
height:100%;
}
#page
{
min-height:100%;
position:relative;
height:100%;
}
#header
{
background-color:#115EA2;
height:100px;
width:97.5;
position:relative;
}
#main
{
width:1300px;
margin-left:auto;
margin-right:auto;
background-color:#F1F2F3;
min-height:90%;
height:auto;
height:89%;
margin:0 auto -50px;
vertical-align:bottom;
}
#footer
{
position:fixed;
width:100%;
bottom:0;
height:35px;
background-color: #115EA2;
}
#header img
{
float:left;
display:inline;
}
#header h2
{
text-align:center;
font-size:44px;
color:#FFFFFF;
left:0px;
top:20px;
font-weight:bold;
font-family: Sans-serif;
float:left;
margin-top:20px;
margin-left:20px;
text-decoration:none;
}
#header h2, a, a:visited, a:hover, a:active
{
color: #FFFFFF;
text-decoration: none;
}
/*#footer h4
{
left:20px;
top:-10px;
position:relative;
text-align:left;
font-weight:bold;
font-family: Sans-serif;
float:left;
color:#fff;
margin-left:20px;
}
#footer a, a:visited, a:hover, a:active
{
color::#fff;
text-decoration:none;
position:relative;
left:1025px;
top:10px;
text-align:left;
font-weight:bold;
font-family:Sans-serif;
float:left;
margin-left:20px;
}*/
/* NAVIGATION BAR CODE */
#navigation
{
position:absolute;
top:60;
left:500;
right:0;
bottom:0;
width:60%;
height:24px;
background-color:#115EA2;
min-width:100px;
text-align:center;
padding:10px 20px;
}
#navigation a
{
font-size:20px;
font-weight:bold;
font-style:Sans-serif;
margin:10px 0;
height:18px;
padding:12px 10px;
color:#FFF;
text-decoration:none;
}
#navigation a:hover
{
background-color:#333;
}