底部橫幅移動到內容區域

我已經使用W3驗證了兩個HTML & css，但是當我嘗試在不同的屏幕分辨率下測試它時，底部橫幅始終移動到內容區域。當我在Internet Explorer 8中擁有所有工具欄時，也會發生這種情況。在使用我的1280x1024監視器的Firefox中似乎可以更好地工作。我知道這是一個CSS問題，但無法糾正它。在這件事上得到一些幫助是件好事。底部橫幅移動到內容區域

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> 
<html> 
<head> 
<!-- saved from url=(0017)http://localhost/ --> 
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 
<title>My Test Site</title> 
<meta content="" name="description"> 
<meta content="," name="keywords"> 
<meta content="index, nofollow" name="robots"> 
<meta content="" name="google-site-verification"> 
<link href="css/layout.css" rel="stylesheet" type="text/css"> 
<link href="favicon.ico" rel="shortcut icon" type="image/x-icon"> 
<link href="favicon.png" rel="icon" type="image/png"><!--[if gt IE 7]> 
<link rel="stylesheet" type="text/css" href="css/ie8.css" /> 
<![endif]--> 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"  
<type="text/javascript"> 
</script> 
<script src="js/jquery.scrollTo-1.4.2.js" type="text/javascript"> 
</script> 
<script type="text/javascript"> 
$(document).ready(function() { 

    $('a.panel').click(function() { 

      $('a.panel').removeClass('selected'); 
      $(this).addClass('selected'); 

      current = $(this); 

      $('#wrapper').scrollTo($(this).attr('href'), 50);    

      return false; 
    }); 

    $(window).resize(function() { 
      resizePanel(); 
    }); 

}); 

function resizePanel() { 

    width = $(window).width(); 
    height = $(window).height(); 

    mask_width = width * $('.item').length; 

    $('#debug').html(width + ' ' + height + ' ' + mask_width); 

    $('#wrapper, .item').css({width: width, height: height}); 
    $('#mask').css({width: mask_width, height: height}); 
    $('#wrapper').scrollTo($('a.selected').attr('href'), 0); 
    }   
</script> 
</head> 
<body> 
<div id="wrapper"> 
<div id="mask"> 
<div class="item" id="item1"><a class="img" href="/"><img alt="" 
id="logo" name="logo" src="http://i50.tinypic.com/nghgg.png"></a> 
<div id="top_banner"><script type="text/javascript"> 
       pb_cid='BAYBANNER468X60_1'; 
       pb_type='banner_468x60'; 
</script> <script src="http://clkads.com/banners/script/include_img_banner.js"  
type="text/javascript"> 
</script></div> 
<div id="navwrapper"> 
<ul class="floatleft" id="nav"> 
<li><a href="#">Home</a></li> 
</ul> 
<br class="clear"></div> 
<div id="left_banner"><script type="text/javascript"> 
       pb_cid='BAYBANNER120X600_1'; 
       pb_type='banner_120x600'; 
</script> <script src="http://clkads.com/banners/script/include_img_banner.js" 
type="text/javascript"> 
</script></div> 
<div class="content"> 
<div id="right_banner"><script type="text/javascript"> 
        pb_cid='BAYBANNER120X600_1'; 
        pb_type='banner_120x600'; 
</script> <script src="http://clkads.com/banners/script/include_img_banner.js" 
type="text/javascript"> 
</script></div> 
<div id="bottom_banner"><script type="text/javascript"> 
        pb_cid='BAYBANNER728X90_2'; 
        pb_type='banner_728x90'; 
</script><script src="http://clkads.com/banners/script/include_img_banner.js" 
type="text/javascript"> 
</script></div> 
<div class="right_arrow"><a class="panel" href="#item2"><img alt="arrow" height="24" 
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div> 
<div id="footer">Copyright 2012 All Rights Reserved | <a href="">Privacy Policy</a> | 
<a href="">Terms of Use</a></div> 
</div> 
</div> 
<div class="item" id="item2"> 
<div class="content"> 
<div class="left_arrow"><a class="panel" href="#item1"><img alt="arrow" 
height="24"  
src="http://i49.tinypic.com/2i7obnq.png" width="24"></a></div> 
<div class="right_arrow"><a class="panel" href="#item3"><img alt="arrow"  
height="24"  
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div> 
</div> 
</div> 
<div class="item" id="item3"> 
<div class="content"> 
<div class="left_arrow"><a class="panel" href="#item2"><img alt="arrow" height="24"  
src="http://i49.tinypic.com/2i7obnq.png" width="24"></a></div> 
<div class="right_arrow"><a class="panel" href="#item4"><img alt="arrow" 
height="24"  
src="http://i48.tinypic.com/2rcy1zp.png" width="24"></a></div> 
</div> 
</div> 
</div> 
</div> 
</body> 
</html>

CSS

body { 
height : 100%; 
width : 100%; 
margin : 0; 
padding : 0; 
overflow : hidden; 
} 
#wrapper { 
width : 100%; 
height : 100%; 
position : absolute; 
top : 0; 
left : 0; 
background-color : #ffffff; 
overflow : hidden; 
} 
#mask { 
width : 500%; 
height : 100%; 
background-color : #ffffff; 
} 
.item { 
width : 20%; 
height : 100%; 
float : left; 
background-color : #b4d8e7; 
} 
.content { 
width : 969px; 
height : 590px; 
margin : 0 auto; 
background-color : #000000; 
position : relative; 
top : 125px; 
} 
.selected { 
background : #fff; 
font-weight : 700; 
} 
.clear { 
clear : both; 
} 
a img { 
border : none; 
display : block; 
} 
a { 
outline : 0; 
} 
html { 
overflow : auto; 
} 

#navwrapper { 
background-color:#000; 
left:0; 
top:80px; 
width:100%; 
position:fixed; 
} 

#nav { 
font-family:Arial, Helvetica, sans-serif; 
font-size:12px; 
padding-top:4px; 
} 

#nav,#nav ul { 
list-style:none; 
font-family:Arial, Helvetica, sans-serif; 
margin:0; 
padding:0; 
} 

#nav a { 
display:block; 
color:#ccc; 
text-decoration:none; 
padding:7px; 
} 

#nav a.dmenu:hover { 
color:#36C !important; 
background-color:#fff !important; 
} 

#nav li { 
float:left; 
position:static; 
width:auto; 
} 

#nav li ul { 
position:absolute; 
display:none; 
margin-left:-1px; 
padding-bottom:10px; 
background-color:#FFF; 
border:1px solid #bbb; 
border-top:none; 
box-shadow:0 0 5px #ddd; 
z-index:5000; 
} 

#nav li:hover a,#nav a:focus,#nav a:active { 
color:#fff; 
background:#444; 
text-decoration:none; 
padding:7px; 
} 

#nav li ul,#nav ul li { 
width:10em; 
} 

#nav ul li a { 
color:#36C !important; 
border-right:0; 
} 

#nav ul li a:hover { 
color:#36C !important; 
background-color:#eef3fb !important; 
border-right:0; 
} 

#nav li:hover ul { 
display:block; 
} 

#nav li:hover ul a { 
color:#000; 
background-color:transparent; 
} 

#nav ul a:hover { 
background-color:#606060 !important; 
color:#FFF !important; 
} 

.menuseprator { 
border-bottom:1px solid #ddd; 
margin:10px 0; 
} 

.arrowdown { 
font-size:0.5em; 
} 

.floatleft { 
float:left; 
} 

.floatright { 
float:right; 
} 

.clear { 
clear:both; 
} 

#top_banner { 
width : 468px; 
height : 60px; 
right : 1px; 
position : fixed; 
overflow : hidden; 
padding : 10px; 
} 
#left_banner { 
width : 120px; 
height : 600px; 
left : 1px; 
top : 110px; 
position : fixed; 
overflow : hidden; 
padding : 10px; 
} 
#right_banner { 
width : 120px; 
height : 600px; 
right : 1px; 
top : 110px; 
position : fixed; 
overflow : hidden; 
padding : 10px; 
} 
#bottom_banner { 
bottom : 50px; 
right : 260px; 
height : 90px; 
width : 728px; 
position : fixed; 
z-index : 999; 
margin : 0; 
} 
.right_arrow { 
height : 24px; 
width : 24px; 
right : 0; 
bottom : -30px; 
border : none; 
position : absolute; 
padding : 0; 
} 
.left_arrow { 
height : 24px; 
width : 24px; 
left : 0; 
bottom : -30px; 
border : none; 
position : absolute; 
padding : 0; 
} 
#logo { 
left : 10px; 
top : 8px; 
border : 0; 
height : 64px; 
width : 64px; 
position : fixed; 
} 
#footer { 
bottom : 5px; 
left : 476px; 
font-family : Arial, Helvetica, sans-serif; 
font-size : 11px; 
text-align : center; 
color : #6e6e6e; 
position : fixed; 
}

來源

2012-06-28 tommytwotoes

的問題是你的（過）使用的position: fixed。固定位置不應該用於一般站點佈局。它不適用於不同分辨率的瀏覽器，通常會導致問題。最多隻能用於將條添加到屏幕的頂部或底部。

你的問題是一個基礎問題，需要對CSS進行一些重新設計。

來源

2012-06-28 14:19:35 smdrager

謝謝4您的快速回復smdrager。我已經使用position：固定爲水平佈局，以便導航欄和廣告素材僅加載一次，使網站加載速度更快。 – tommytwotoes

底部橫幅移動到內容區域

回答

相關問題