手机上的CSS宽度问题
我有这个网站：Link
我遇到的问题是，在移动设备上，身体右侧有这个不寻常的空白区域：
此网站由一个包含多个部分的页面组成，导航图标用于在页面中平滑滚动。
要尝试修复问题，我使用了推荐的：body{ overflow-x:hidden; }，这解决了问题，但这会阻止我的滚动系统出于某种原因而停止工作。
有没有办法让这个网站模仿body{ overflow-x:hidden; }而不使用它，即使是使用jquery？
以下是代码：
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=768; initial-scale=1.0;" />
<title>Georgia Elliott Illustration</title>
<link rel='stylesheet' href='http://fonts.googleapis.com/css?family=PT+Sans:400,700' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Lato:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/print.css" type="text/css" media="print" />
<link rel="stylesheet" href="js/twitter/jquery.tweet.css" media="screen" />
<link rel="shortcut icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="icon" type="image/x-icon" href="http://1.gravatar.com/blavatar/f541b2d0f8b48c05e56c0daa078f3ed9?s=16" sizes="16x16" />
<link rel="apple-touch-icon-precomposed" href="http://1.gravatar.com/blavatar/94661061bf2aad5cdce6115262923c20?s=114" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript" src="js/page.js"></script>
<script type="text/javascript" src="js/smooth.js"></script>
<script type="text/javascript" src="js/twitter/jquery.tweet.js"></script>
<script type='text/javascript'>
jQuery(function($){
$("#twitter-feed-main").tweet({
username: "creative_exp",
join_text: "auto",
avatar_size: 32,
count: 3,
auto_join_text_default: "We said:",
auto_join_text_ed: "We:",
auto_join_text_ing: "We were:",
auto_join_text_reply: "We replied to:",
auto_join_text_url: "We were checking out:",
loading_text: "Loading Tweets..."
});
});
</script>
</head>
<body>
<div id="splat"></div>
<div id="logo">
<a href="#home"></a>
</div>
<div id="header">
<div id="nav" class="nav">
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#portfolio">Portfolio</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
</div>
<div id="whole">
<div class="content">
<div id="home-page" class="page">
<div class="page-back"></div>
<a id="home"></a>
<div class="inner-page">
<h1>Welcome</h1>
<div class="indent">
</div>
</div>
</div><!--END home-page-->
<div id="page1" class="page">
<div class="page-back"></div>
<a id="about"></a>
<div class="inner-page">
<h1>About Me</h1>
<div class="indent">
About page content goes here.
</div>
</div>
</div><!--END page1-->
<div id="page2" class="page">
<div class="page-back"></div>
<a id="portfolio"></a>
<div class="inner-page">
<h1>Portfolio</h1>
<div class="indent">
Portfolio page content goes here.
<div id="portfolio-items">
<ul id="port-ul1">
<li id="port-item1">Test</li>
</ul>
<ul id="port-ul2">
<li id="port-item2">Test 2</li>
</ul>
<ul id="port-ul2">
<li id="port-item3">Test 3</li>
</ul>
</div>
</div>
</div>
</div><!--END page2-->
<div id="page3" class="page">
<div class="page-back"></div>
<a id="contact"></a>
<div class="inner-page">
<h1>Contact Me</h1>
<div class="indent">
Contact page content goes here.
</div>
</div>
</div><!--END page3-->
<div id="terms-page-ie" class="page">
<div class="page-back"></div>
<a id="terms-ie"></a>
<div id="cross-terms-ie" class="cross-terms-ie">X</div>
<div class="inner-page">
<h1>Terms</h1>
<div class="indent">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
</div>
<div id="footer">
<div id="share" class="pull_right">
<ul>
<a href="https://www.facebook.com/georgia.e.elliott" target="_new"><li class="pull_left"><span>Facebook</span></li></a>
<a href="javascript:void(0);" id="twitter"><li class="pull_left"><span>Twitter</span></li></a>
<a href="http://georgiaelishaillustrator.wordpress.com/" target="_new"><li class="pull_left"><span>Blog</span></li></a>
</ul>
</div>
<div id="footertext"> © 2012 Georgia Elliott | All rights reserved. | Site By: <a href="http://dandd.dpwebdev.co.uk" target="_new">D&D Creative</a> | <a href="javascript:void(0);" id="terms-link">Terms</a><img src="img/ajax-loader.gif" class="ie-loader" style="vertical-align:middle;" /><img src="img/footer.png" id="ge-il-btm" style="vertical-align: middle; position: absolute; left: 0; right: 0; margin: 0 auto;" /></div>
</div>
<div id="terms-container">
<div id="terms">
<div id="cross-terms" class="cross">X</div>
<div class="inner-content">
<h3>Terms and Conditions</h3>
<div class="indent" style="overflow:auto; height:300px;">
<h5>INTRODUCTION</h5>
<p>These terms and conditions govern your use of our website; by using our website, you accept these terms and conditions in full. If you disagree with these terms and conditions or any part of these terms and conditions, you must not use our website. You must be at least 13 years of age to use our website. By using our website you warrant and represent that you are at least 13 years of age.</p>
<h5>LICENCE TO USE WEBSITE</h5>
<p>Unless otherwise stated, we or our licensors own the intellectual property rights in the website and material on the website. Subject to the licence below, all these intellectual property rights are reserved. You may view, download for caching purposes only, and print pages or other content from the website for your own personal use, subject to the restrictions set out below and elsewhere in these terms and conditions. <br><br>
You must not:<br>
(a) republish material from this website (including republication on another website);<br>
(b) sell, rent or sub-license material from the website;<br>
(c) show any material from the website in public;<br>
(d) reproduce, duplicate, copy or otherwise exploit material on our website for a commercial purpose;<br>
(e) edit or otherwise modify any material on the website; or<br>
(f) redistribute material from this website except for content specifically and expressly made available for redistribution.</p>
<h5>ACCEPTABLE USE</h5>
<p>You must not use our website in any way that causes, or may cause, damage to the website or impairment of the availability or accessibility of the website; or in any way which is unlawful, illegal, fraudulent or harmful, or in connection with any unlawful, illegal, fraudulent or harmful purpose or activity.
You must not use our website to copy, store, host, transmit, send, use, publish or distribute any material which consists of (or is linked to) any spyware, computer virus, Trojan horse, worm, keystroke logger, rootkit or other malicious computer software.
You must not conduct any systematic or automated data collection activities (including without limitation scraping, data mining, data extraction and data harvesting) on or in relation to our website without our express written consent.
You must not use our website to transmit or send unsolicited commercial communications. You must not use our website for any purposes related to marketing without our express written consent.</p>
<h5>RESTRICTED ACCESS</h5>
<p>Access to certain areas of our website is restricted. We reserve the right to restrict access to other areas of our website, or indeed our whole website, at our discretion. If we provide you with a user ID and password to enable you to access restricted areas of our website or other content or services, you must ensure that that user ID and password is kept confidential. We may disable your user ID and password in our sole discretion without notice or explanation.</p>
</div>
</div>
</div>
</div>
<div id="overlay"></div>
<div id="twitter-feed-container">
<div id="twitter-feed-cross">X</div>
<div id="twitter-arrow"></div>
<div id="twitter-feed-main">
</div>
<a href="" id="see-twitter" target="_new" >See More...</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#terms-link").click(function() {
$('#terms-page-ie').show();
$('#terms-link').hide();
$('.ie-loader').show();
var $targetId = $('#terms-page-ie'), $targetAnchor = $('[name=#terms-page-ie]');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$('html, body').animate({scrollTop: targetOffset}, 1500);
}
$('.ie-loader').fadeOut(2500);
});
$("#cross-terms-ie").click(function() {
$('#terms-page-ie').hide();
$('#terms-link').show();
$('html, body').animate({scrollTop: 0}, 1000);
});
$("#twitter").click(function() {
$('#twitter-feed-container').fadeToggle(800);
});
$("#twitter-feed-cross").click(function() {
$('#twitter-feed-container').fadeOut(800);
});
$
});
</script>
</body>
</html>
CSS：
/* CSS Document */
/* FONTS */
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.ttf');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.eot');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.svg');
}
@font-face {
font-family:"Raleway";
src: url('../web-fonts/raleway_thin-webfont.woff');
}
* {
margin:0;
font-family:'PT Sans';
}
html, body {
height:100%;
width:100%;
}
html {
overflow-y: auto;
overflow-x: hidden;
}
.content {
height:100%;
}
a {
color:#6CF;
}
a:hover {
color:#69F;
}
a:active {
color:#C06;
}
/* LOGO */
#logo {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new-front.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
#splat {
top:0;
left:20px;
z-index:1000;
position:fixed;
background-image:url(../img/logo-new.png);
background-repeat:no-repeat;
background-color:transparent;
width:400px;
height:400px;
}
/* HEADER STYLES */
#header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:32px;
font-size:12px;
padding-left:8px;
}
/* NAV STYLES */
.nav {
position: fixed;
right: 0;
width: 400px;
height: 40px;
line-height: 36px;
}
#nav ul {
width: 435px;
height: 40px;
padding-left: 0px;
}
#nav li {
float:left;
margin:0 30px;
list-style:none;
}
#nav li a {
color:#FFF;
text-decoration:none;
border-bottom:dotted 1px #FFF;
}
#nav li a:hover {
color:#69F;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
#nav li a:active {
color:#C06;
text-decoration:none;
border-bottom:dotted 1px #6CF;
}
/* PAGE STYLES */
.page {
width:100%;
}
.inner-page {
max-width: 880px;
min-width: 680px;
margin: 0 auto 0 430px;
padding: 70px 0 48px 0;
}
.page-texture {
background-image:url(../img/overlay-pattern.png);
background-color:transparent;
background-repeat:repeat;
position: fixed;
width: 100%;
height: 100%;
top:0;
left:0;
}
#home-page {
color:#000000;
background:#FFF url(../img/overlay-pattern.png);
height:1000px;
}
#page1 {
background:#CCC url(../img/overlay-pattern.png);
height:1200px;
color:#000000;
}
#page2 {
background:#999 url(../img/overlay-pattern.png);
height:2000px;
}
#page3 {
background:#666 url(../img/overlay-pattern.png);
height:780px;
}
#terms-page-ie {
display:none;
background:#333 url(../img/overlay-pattern.png);
color:#FFFFFF;
}
.inner-content {
padding:20px;
}
.indent {
margin-left:20px;
margin-top:8px;
}
.hidden-overflow {
overflow:hidden;
}
.cross {
right:5px;
top:2px;
position:absolute;
font-family:"Raleway";
font-size:16px;
cursor:pointer;
}
.cross-terms-ie {
font-family:"PT Sans";
font-size:16px;
cursor:pointer;
position:absolute;
right:5px;
margin-top:42px;
}
img.ie-loader {
display:none;
}
#terms-container {
display:none;
position:fixed;
width:100%;
height:100%;
margin:auto;
top:0;
left:0;
}
#terms {
position:absolute;
width:700px;
height:400px;
margin:auto;
left:0;
right:0;
top:0;
bottom:0;
background:#000000;
color:#FFFFFF;
z-index:100;
}
#overlay {
display:none;
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
background-color:#000000;
opacity:0.4;
filter:alpha(opacity=40);
}
/* FOOTER STYLES */
#footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #000000;
color:#FFFFFF;
height: 40px;
padding-top: 1px;
line-height:40px;
font-size:12px;
padding-left:8px;
z-index:1000;
}
#footertext a {
text-decoration:none;
border-bottom:1px dotted #ffffff;
color:#ffffff;
}
@media (max-width: 1230px) {
#ge-il-btm {
display:none;
}
}
#share {
margin-right:8px;
}
#share li {
list-style:none;
padding:0 8px;
}
#share li:hover {
background:#6CF;
color:#000000;
}
#share a li {
text-decoration:none;
color:#FFFFFF;
}
/* PORTFOLIO STYLES */
#portfolio-items ul {
background: black;
border: 1px #6CF solid;
list-style-image: url(../img/bullet.png);
color: #6CF;
width: 400px;
cursor: pointer;
height: 20px;
margin: 10px 0 0 0;
padding: 10px 30px 10px 30px;
}
/* FLOAT STYLES */
.pull_left {
float:left;
}
.pull_right {
float:right;
}
/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
display:block;
font-weight:normal;
}
h1 { font-size:48px; font-family:"Raleway"; margin-bottom:30px; }
h2 { font-size:42px; font-family:"Raleway"; }
h3 { font-size:36px; font-family:'Lato'; }
h4 { font-size:30px; font-family:'Lato'; }
h5 { font-size:24px; font-family:'Lato'; }
h6 { font-size:18px; font-family:'Lato'; }
#terms-page-ie h5 {
border-bottom: 1px dotted #FFFFFF;
margin: 0px 0px 10px 0px;
}
#terms-page-ie p {
margin: 0 0 25px 0;
}
.shadow {
text-shadow:-1px 1px 3px #000000;
}
/* LOADING SCRREN */
span {
display: block;
margin: 0 auto;
}
span[class*="l-"] {
height: 8px; width: 8px;
background: #6CF;
display: inline-block;
margin: 12px 2px;
-webkit-animation: loader 4s infinite;
-webkit-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-webkit-animation-fill-mode: both;
-moz-animation: loader 4s infinite;
-moz-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-moz-animation-fill-mode: both;
-ms-animation: loader 4s infinite;
-ms-animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
-ms-animation-fill-mode: both;
animation: loader 4s infinite;
animation-timing-function: cubic-bezier(0.030, 0.615, 0.995, 0.415);
animation-fill-mode: both;
}
span.l-1 {-webkit-animation-delay: 1s;animation-delay: 1s;-ms-animation-delay: 1s;-moz-animation-delay: 1s;}
span.l-2 {-webkit-animation-delay: 0.8s;animation-delay: 0.8s;-ms-animation-delay: 0.8s;-moz-animation-delay: 0.8s;}
span.l-3 {-webkit-animation-delay: 0.6s;animation-delay: 0.6s;-ms-animation-delay: 0.6s;-moz-animation-delay: 0.6s;}
span.l-4 {-webkit-animation-delay: 0.4s;animation-delay: 0.4s;-ms-animation-delay: 0.4s;-moz-animation-delay: 0.4s;}
span.l-5 {-webkit-animation-delay: 0.2s;animation-delay: 0.2s;-ms-animation-delay: 0.2s;-moz-animation-delay: 0.2s;}
span.l-6 {-webkit-animation-delay: 0;animation-delay: 0;-ms-animation-delay: 0;-moz-animation-delay: 0;}
@-webkit-keyframes loader {
0% {-webkit-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-webkit-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-moz-keyframes loader {
0% {-moz-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-moz-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-keyframes loader {
0% {-transform: translateX(-30px);opacity: 0;}
25% {opacity: 1;}
50% {-transform: translateX(30px);opacity: 0;}
100% {opacity: 0;}
}
@-ms-keyframes loader {
0% {-ms-transform: translateX(-30px); opacity: 0;}
25% {opacity: 1;}
50% {-ms-transform: translateX(30px);opacity: 1;}
100% {opacity: 0;}
}
/* TWITTER FEED */
#twitter-feed-container{
width: 300px;
position: fixed;
bottom: 49px;
right: 25px;
height: 340px;
background: #000000;
border-radius: 4px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
display: none;
color:#CCCCCC;
font-size:13px;
}
#twitter-feed-container a{
color:#CCCCCC;
}
#twitter-feed-container a.tweet_avatar{
border-bottom:none !important;
}
.tweet_list li {
margin-bottom:4px;
padding: 0.5em 0.5em 12px 0.5em !important;
}
#twitter-arrow {
width:0;
height:0;
right: 30px;
bottom: -16px;
position:absolute;
border: .65em solid;
border-color: #000000 transparent transparent transparent;
}
#twitter-feed-main {
height: 305px;
overflow: hidden;
position: absolute;
bottom: 30px;
right: 8px;
width: 285px;
}
#twitter-feed-cross {
font-family: "PT Sans";
font-size: 16px;
cursor: pointer;
float: right;
right: 10px;
top: 8px;
z-index: 10000;
position: absolute;
}
#twitter-logo {
background: url(../img/social/doodles.png) -9px -10px;
height: 70px;
width: 70px;
position:absolute;
}
a#see-twitter {
position:absolute;
bottom:5px;
right:8px;
}
JS用于平滑滚动
$(document).ready(function() {
$('html, body').animate({scrollTop: 0}, 1000);
function filterPath(string) {
return string
.replace(/^\//,'')
.replace(/(index|default).[a-zA-Z]{3,4}$/,'')
.replace(/\/$/,'');
}
$('a[href*=#]').each(function() {
if ( filterPath(location.pathname) == filterPath(this.pathname)
&& location.hostname == this.hostname
&& this.hash.replace(/#/,'') ) {
var $targetId = $(this.hash), $targetAnchor = $('[name=' + this.hash.slice(1) +']');
var $target = $targetId.length ? $targetId : $targetAnchor.length ? $targetAnchor : false;
if ($target) {
var targetOffset = $target.offset().top;
$(this).click(function() {
$('html, body').animate({scrollTop: targetOffset}, 1500);
return false;
});
}
}
});
});
1 个答案:
答案 0 :(得分：0)
从网站上看，我建议在主体上使用div id“home-page”创建背景图像并使用z-index，以便页眉和页脚黑条出现在前面。
通过身体上的背景图像，这将显示所有与该图像相关的房地产 - 显然。
关于图像的另一个建议 - 只需在photoshop中裁剪网格图案的4X4图像并使用background: url(YOURIMAGEPATH) repeat;
这将在X和Y轴上重复图像而不是大背景图像，因此您不需要样式height: 100%，因为它只会填充所有空间。
试试这个，看看是否能解决问题： - ）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？