我在这个单页网站上工作:http://syncageband.com
如您所见，页面大于 100%，但代码中没有任何元素会导致这种情况。我正在使用 php 检索(通过 Wordpress 插件)Facebook 页面的帖子，再次使用 php 检索 Fast Secure Contact Form , jQuery 和 ScrollMagic 用于视差/滚动效果。这是 HTML 代码:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Syncage</title>
<link rel="icon" href="resources/favicon.svg">
<link href="CSS/style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i,800,800i" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/debug.addIndicators.js"></script>
<script src="JS/SmoothScroll.js"></script>
<script type="text/javascript" src="http://syncageband.com/contact-files/contact-form.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/3.3.0/masonry.pkgd.min.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<![if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]>
</head>
<body>
<a name="top" class="AnchorPoint2"></a>
<a href="#top"><div id="syncageLogo"></div></a>
<div id="socialLinks">
<a href="https://www.facebook.com/syncageband/" target="_blank"><div id="facebook"></div></a>
<a href="https://twitter.com/syncageband" target="_blank"><div id="twitter"></div></a>
<a href="https://www.instagram.com/syncageband/" target="_blank"><div id="instagram"></div></a>
</div>
<div id="splashScreen">
<div id="stain"></div>
<div id="splashTitle"></div>
</div>
<div id="menuItem">
<a href="#newsAnchor">news</a>
<a href="#bandAnchor">band</a>
<a href="#discographyAnchor">discography</a>
<a href="#galleryAnchor">gallery</a>
<a href="#tourAnchor">tour</a>
<a href="#contactAnchor">contact</a>
</div>
<div id="whiteBand"></div>
<div id="content">
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="newsTitle">news</h1>
</td>
<td>
<a name="newsAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div class="innerContent" id="news">
<?php
define('WP_USE_THEMES', false);
require('controlpanel/wp-blog-header.php');
?>
<?php
global $post;
$args = array('category' => 2);
$myposts = get_posts( $args );
foreach( $myposts as $post ) : setup_postdata($post);
?>
<?php the_content(); ?>
<?php endforeach; ?>
</div>
<h2><a class="linkDefault" href="http://www.facebook.com/syncageband" target="_blank">READ MORE ></a></h2>
</div>
</td>
</tr>
</table>
</div>
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="bandTitle">band</h1>
</td>
<td>
<a name="bandAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div id="band">
<div id="bandPic"></div>
<h4>
<i><b>SYNCAGE</b> is an experimental fusion of jazz, metal, rock, ambience, with some touches of classic Italian prog.
<br>
As they put it themselves, “Syncage are a musical project which aims to sting listeners’ resonance through various psycho emotional devices”.</i>
<br>
<a href="http://theprogressiveaspect.net/blog/2017/05/28/syncage-unlike-here/" target="_blank" class="right">Mel Allen — The Progressive Aspect</a>
</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas orci mauris, egestas sit amet tempor ut, facilisis non lectus. Praesent accumsan convallis tellus. Nullam eu ante porta, luctus ex id, sagittis arcu. Donec ac tellus vel arcu faucibus efficitur eget non elit. Nulla vestibulum gravida felis vitae placerat. Nullam fringilla metus in erat ornare, in tincidunt neque sagittis. Aenean quis arcu eu elit rutrum hendrerit. Vivamus vel nibh tempor, egestas eros id, malesuada velit. Nunc quis ipsum vel urna commodo vestibulum at sit amet leo.
Suspendisse potenti. Duis et volutpat justo. Sed venenatis, arcu id dictum fermentum, velit est malesuada enim, at placerat lorem nisl posuere eros. Praesent hendrerit cursus mollis. Donec faucibus dolor non lorem aliquam, eu dignissim elit egestas. Suspendisse non imperdiet sapien. Pellentesque ut eros sollicitudin, commodo diam eu, luctus nulla. Nullam eros ligula, lacinia ut ante quis, porta auctor est. Mauris egestas metus a mauris efficitur, id accumsan urna pretium. Cras sodales eget turpis eu dignissim. In suscipit tempor viverra. Maecenas nec turpis at ligula ultrices mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi ut vulputate nunc, tincidunt pretium lorem. Duis vel lectus magna. Morbi quis tempus nibh, efficitur laoreet ex.
Sed lacinia non lorem non volutpat. Morbi libero dui, suscipit at massa ut, lacinia consequat mi. Nullam enim massa, ultrices ac pharetra quis, pharetra vitae nisi. Aliquam mauris massa, maximus in turpis et, vehicula efficitur nibh. Phasellus pellentesque leo non maximus volutpat. In vehicula vehicula velit nec cursus. Duis sagittis mollis augue in posuere. Etiam eget metus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi consectetur lectus eget imperdiet mattis. Nullam ligula urna, tincidunt eu facilisis accumsan, venenatis ut tellus. Sed sagittis mi nec mi posuere, blandit ullamcorper nisl congue. Integer ac varius lectus.
Integer molestie nisl ac orci fringilla, non rhoncus felis efficitur. Etiam quis tortor euismod, finibus ante vitae, viverra sem. Phasellus suscipit nunc et metus ultricies, a scelerisque est vestibulum. Vestibulum quis tincidunt enim. Maecenas eu imperdiet metus. Aliquam ornare rhoncus orci, vel tincidunt enim mattis dignissim. Phasellus nec neque consectetur tellus auctor venenatis. Vestibulum consectetur, nulla sed congue placerat, justo urna sollicitudin nisl, eu fringilla diam neque posuere libero. Nam sed sollicitudin neque. Aenean sagittis ornare augue vel vehicula. Praesent eget mi eu nisl pellentesque ullamcorper. Vivamus malesuada, lacus ut efficitur lacinia, erat nunc varius ipsum, vitae interdum sapien ex sit amet est.
Ut sit amet nisl quis risus consectetur pulvinar id vitae justo. Nunc leo nibh, dignissim eget erat sodales, lobortis lacinia turpis. Nullam ex sapien, tincidunt quis interdum sed, laoreet at nunc. Suspendisse aliquam elementum turpis ac viverra. Nam semper sodales ultricies. Donec bibendum turpis eget diam vestibulum, vitae imperdiet urna facilisis. Nulla mollis finibus felis ut rhoncus. Etiam quis odio nec erat placerat fringilla. Aenean eget sem venenatis, euismod massa eu, egestas leo. Quisque cursus eleifend massa tempor vehicula. Donec magna magna, porttitor eget nibh eget, pretium congue dui. Suspendisse consectetur neque nisl, sed dictum neque luctus eget. Mauris ornare.</p>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="discographyTitle">discography</h1>
</td>
<td>
<a name="discographyAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div class="innerContent" id="discography">
<div class="album">
<a href="http://music.syncageband.com/album/unlike-here" target="_blank"><img src="resources/UnlikeHere.jpg"></a>
<div class="AlbumDescription">
<p>UNLIKE HERE <br> (2017)</p>
</div>
</div>
<div class="album">
<a href="http://music.syncageband.com/album/italiota-ep" target="_blank"><img src="resources/Italiota.jpg"></a>
<div class="AlbumDescription">
<p>ITALIOTA / EP <br> (2014)</p>
</div>
</div>
<div class="album">
<a href="http://music.syncageband.com/track/hellhound" target="_blank"><img src="resources/Hellhound.jpg"></a>
<div class="AlbumDescription">
<p>HELLHOUND / SINGLE <br> (2014)</p>
</div>
</div>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="galleryTitle">gallery</h1>
</td>
<td>
<a name="galleryAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div id="gallery">
<div id="galleryYT">
<iframe class="youtubeSplash" src="https://www.youtube.com/embed/3r0zCEbY4HU?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div>
<br>
<h2><a class="linkDefault" href="https://www.youtube.com/user/syncageband" target="_blank">VIEW MORE ></a></h2>
<!-- LightWidget WIDGET --><script src="//lightwidget.com/widgets/lightwidget.js"></script><iframe src="//lightwidget.com/widgets/729f6cd73d255192a290532c1c77bc35.html" scrolling="no" allowtransparency="true" class="lightwidget-widget" style="width: 100%; border: 0; overflow: hidden;"></iframe>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="tourTitle">tour</h1>
</td>
<td>
<a name="tourAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div id="tour">
<img src="resources/live-color.jpg">
<script charset="utf-8" src="https://widget.bandsintown.com/main.min.js"></script><a class="bit-widget-initializer" data-artist-name="Syncage" data-display-local-dates="false" data-display-past-dates="true" data-auto-style="false" data-text-color="#000000" data-link-color="#000" data-popup-background-color="#FFFFFF" data-background-color="#FFFFFF" data-separator-color="#fff" data-language="en" data-display-limit="10" data-link-text-color="#FFFFFF" data-font="Open Sans" data-widget-width="100%"></a>
</div>
</div>
</td>
</tr>
</table>
</div>
<div class="section">
<table>
<tr>
<td class="sectionTitle">
<h1 id="contactTitle">contact</h1>
</td>
<td>
<a name="contactAnchor" class="AnchorPoint"></a>
<div class="sectionContent">
<div id="contact">
<?php
$contact_form = 1; // set desired form number.
$contact_form_path = '/customers/7/1/c/syncageband.com/httpd.www/contact-files/'; // set path to /contact-files/ with slash on end.
require $contact_form_path . 'contact-form-run.php';
?>
</div>
</div>
</td>
</tr>
</table>
</div>
</div>
<!--SCROLLMAGIC-->
<script>
$(function() {
var controller = new ScrollMagic.Controller();
var splashParallax = new ScrollMagic.Scene({
triggerElement: '#splashScreen',
triggerHook: 1,
duration: '300%'
})
.setTween(TweenMax.from('#stain', 1, {y: '-60%', ease:Power0.easeNone}))
.addTo(controller);
var TitleParallax = new ScrollMagic.Scene({
triggerElement: '#splashScreen',
triggerHook: 1,
duration: '300%'
})
.setTween(TweenMax.from('#splashTitle', 1, {y: '-30%', ease:Power0.easeNone}))
.addTo(controller);
var whiteBand = new ScrollMagic.Scene({
triggerElement: '#whiteBand'
})
.setPin('#whiteBand')
.addTo(controller);
whiteBand.triggerHook(0);
var news = new ScrollMagic.Scene({
triggerElement: '#news',
duration: "33%"
})
.setPin('#newsTitle')
.addTo(controller);
news.offset(-108);
news.triggerHook(0.0);
var band = new ScrollMagic.Scene({
triggerElement: '#band',
duration: "67%"
})
.setPin('#bandTitle')
.addTo(controller);
band.offset(-108);
band.triggerHook(0.0);
var gallery = new ScrollMagic.Scene({
triggerElement: '#gallery',
duration: "60%"
})
.setPin('#galleryTitle')
.addTo(controller);
gallery.offset(-108);
gallery.triggerHook(0.0);
var discography = new ScrollMagic.Scene({
triggerElement: '#discography',
duration: "145%"
})
.setPin('#discographyTitle')
.addTo(controller);
discography.offset(-108);
discography.triggerHook(0.0);
var tour = new ScrollMagic.Scene({
triggerElement: '#tour',
duration: "51%"
})
.setPin('#tourTitle')
.addTo(controller);
tour.offset(-108);
tour.triggerHook(0.0);
var contact = new ScrollMagic.Scene({
triggerElement: '#contact',
duration: "51%"
})
.setPin('#contactTitle')
.addTo(controller);
contact.offset(-108);
contact.triggerHook(0.0);
});
$('#cff.masonryfeed').masonry({
itemSelector: '.cff-item'
});
</script>
</body>
</html>
还有 CSS:
@charset "UTF-8";
/* CSS Document */
html,body
{
/*overflow-x: hidden!important;*/
}
body {
background-image: url(../resources/splash.jpg);
background-size: cover;
background-color: #fff;
background-repeat: no-repeat;
}
.AnchorPoint {
position: relative;
top: -98px;
}
.AnchorPoint2 {
position: relative;
top: -400px;
}
h1, h2, h3, h4, p, a {
font-family: Open Sans, Open Sans Semibold, Open Sans Semibold Italic;
font-size: 1em;
line-height: inherit;
}
h2 {
font-weight: 800;
font-size: 1em;
text-align: center;
width: 94%;
position: relative;
top: 18px;
z-index: 400;
}
.bold {
font-weight: 700;
}
.extraBold {
font-weight: 800;
}
.italic {
font-style: italic;
}
.left {
text-align: left;
}
.center {
text-align: center;
}
.right {
text-align: right;
}
.justify {
text-align: justify;
}
#syncageLogo {
position: fixed;
top: 24px;
left: 72px;
background-image: url(../resources/logo.svg);
background-repeat: no-repeat;
width: 60px;
height: 53px;
z-index: 900;
}
/*SPLASH*/
#splashScreen {
height: 100%;
width: 100%;
}
#stain {
background-image: url(../resources/stain.png);
background-size: cover;
width: 746px;
height: 707px;
margin: auto;
margin-top: 400px;
}
#splashTitle {
background-image: url(../resources/splash-title.png);
background-size: cover;
width: 384px;
height: 332px;
position: absolute;
top: 232px;
left: 32.5%;
}
/*splash END*/
/*SOCIAL BUTTONS*/
#socialLinks {
position: fixed;
top: 33.5px;
right: 67px;
z-index: 100;
}
#socialLinks div {
float: left;
margin-left: 18px;
background-color: rgba(0,0,0,0);
background-repeat: no-repeat;
background-position: center;
width: 39px;
height: 39px;
}
#socialLinks div:hover {
background-color: rgba(0,0,0,1);
}
#facebook {
background-image: url(../resources/facebook.svg);
}
#facebook:hover {
background-image: url(../resources/facebook-w.svg)
}
#twitter {
background-image: url(../resources/twitter.svg);
}
#twitter:hover {
background-image: url(../resources/twitter-w.svg);
}
#instagram {
background-image: url(../resources/instagram.svg);
}
#instagram:hover {
background-image: url(../resources/instagram-w.svg);
}
/*social buttons END*/
/*MENU SIDEBAR*/
#menuItem {
position: fixed;
top: 34%;
right: 72px;
left: auto;
overflow:hidden;
margin:0px;
z-index: 110;
}
#menuItem a {
color: #ffffff;
font-weight: 700;
text-decoration: none;
line-height: 9px;
clear:both;
float:right;
background-color: #000000;
padding-left: 36px;
padding-right: 9px;
padding-top: 9px;
padding-bottom: 9px;
margin-bottom: 18px;
transition: padding-left 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
}
#menuItem a:hover {
padding-left: 63px;
}
/*menu sidebar END*/
#whiteBand {
position: absolute;
top: 100%;
width: 100vw;
height: 98px;
background-color: #fff;
margin-left: -8px;
z-index: 5;
}
/*CONTENT*/
#content {
background-color: #fff;
width: 100vw;
margin-left: -8px;
position: absolute;
top: 100vh;
clear: both;
z-index: 4;
}
#content table tr td {
vertical-align: top;
}
a {
color: #000;
text-decoration: none;
z-index: 1;
}
a:hover {
color: #fff;
background-color: #000;
padding: 0;
}
.linkDefault {
color: #000;
text-decoration: none;
z-index: 1;
}
.linkDefault:hover {
color: #fff;
background-color: #000;
padding: 18px 9px 18px 9px;
}
.sectionTitle {
width: 189px;
}
.sectionTitle h1 {
writing-mode: tb-rl;
transform: rotate(180deg);
font-size: 64px;
line-height: 50px;
text-align: right;
z-index: 51;
position: relative;
left: 22px;
}
.section {
padding-top: 98px;
padding-right: 81px;
padding-bottom: 0px; /*to get actual value --> desired padding-bottom minus padding-top */
z-index: 50;
}
.sectionContent {
height: 100%;
width: inherit;
}
.innerContent {
width: 100%;
}
/*NEWS SECTION - DO NOT erase empty IDs, they serve as anchor points! */
#news {
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
margin-top: -18px;
}
.cff-item {
background-color: #fff;
padding-bottom: 24px;
border-bottom: 7px solid #000;
}
.cff-link:hover, a.cff-photo:hover {
background-color: transparent;
}
.cff-wrapper {
width: 80vw;
}
.cff-post-links {
text-align: center;
}
.cff-viewpost-facebook {
text-transform: uppercase;
font-size: 12px;
}
.cff-viewpost-facebook:hover {
background-color: transparent;
color: #000;
font-weight: 700;
}
.cff-date {
font-size: 0.9em;
}
.cff-date, .cff-text a {
font-weight: 700;
}
.cff-date {
line-height: 0;
}
.cff-view-comments-wrap, .cff-share-container, .cff-expand, .cff-link-caption, .cff-link-title, .cff-comments, .cff-comment, .cff-comment-likes, .cff-likes {
display: none;
}
.cff-photo img, .cff-shared-link img {
height: 115.5px;
width: 100%;
object-fit: cover;
object-position: center;
}
#cff.masonryfeed .cff-item{ width: 31%; margin: 1%; }
/*#news {
-webkit-column-count: 3;
-moz-column-count: 3;
column-count: 3;
-webkit-column-gap: 9px;
-moz-column-gap: 9px;
column-gap: 9px;
}
#news div {
display: inline-table;
width: 100%;
height: auto;
margin-right: 18px;
margin-bottom: 18px;
}
#news div img {
height: 115.5px;
width: inherit;
object-fit: cover;
object-position: center;
}
#news div p {
text-align: justify;
max-height: 50%;
width: inherit;
margin-top: 18px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}*/
/*news section END*/
/*BAND SECTION*/
#band {
width: 100%;
}
#bandPic {
height: 400px;
width: 100%;
background-image: url(../resources/Syncage-band.jpg);
background-size: cover;
background-position: top;
transition: background-image 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
}
#bandPic:hover {
background-image: url(../resources/Syncage-band-color.jpg);
}
#band h4 {
font-weight: 400;
text-align: center;
}
#band h4 a {
font-size: 0.9em;
line-height: 3em;
}
#band h4 a:hover {
background-color: rgba(255,255,255,0.00);
color: #000;
font-weight: 700;
}
#band p {
line-height: 1.5em;
width: 100%;
text-align: justify;
text-align-last: left;
-webkit-column-count: 2; /* Chrome, Safari, Opera */
-moz-column-count: 2; /* Firefox */
column-count: 2;
-webkit-column-gap: 18px; /* Chrome, Safari, Opera */
-moz-column-gap: 18px; /* Firefox */
column-gap: 18px;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
}
/*band section END*/
/*DISCOGRAPHY SECTION*/
.album {
margin: 0px 0px 72px 0px;
overflow: hidden;
}
.album img {
float: left;
width: 468px;
height: 468px;
transition: opacity 0.2s ease-in-out 0s, color 0.2s ease-in-out 0s;
}
.album img:hover {
opacity: 0.7;
}
.AlbumDescription {
float: left;
margin-top: 45px;
margin-left: 36px;
}
.album p {
font-size: 1.8em;
font-weight: 800;
}
.album a:hover {
background-color: rgba(0,0,0,0)!important;
}
/*discography section END*/
/*GALLERY SECTION*/
#gallery {
width: calc(100vw - 282px);
}
.youtubeSplash {
width: 100%;
height: 600px;
}
/*#galleryYT {
text-align: center;
align-content: center;
align-items: center;
alignment-baseline: center;
}*/
.lightwidget-widget {
}
#gallery h2 {
margin-top: 45px;
margin-bottom: 72px;
}
/*gallery section END*/
/*TOUR SECTION*/
.bit-widget {
font-size: 15px!important;
border-top: #fff;
padding: 0px 0px 0px 0px!important;
}
.bit-no-dates-container {
border-top: #fff!important;
}
.bit-button {
visibility: hidden!important;
}
#tour {
width: 100%;
padding-left: 0px;
padding-right: 72px;
}
#tour img {
height: 300px;
object-fit: cover;
object-position: center;
width: inherit;
margin-bottom: 18px;
filter: grayscale(100%);
transition: 0.2s ease-in-out 0s;
}
#tour img:hover {
filter: grayscale(0%);
transition: 0.2s ease-in-out 0s;
}
.bit-event-list-title {
color: #fff!important;
background-color: #000!important;
padding-right: 12px!important;
padding-left: 12px!important;
}
.bit-clickable {
color: #000!important;
background-color: #fff!important;
text-decoration: none!important;
padding-right: 12px!important;
padding-left: 12px!important;
}
.bit-event:hover {
background-color: #fff!important;
font-weight: 700;
}
.bit-clickable:hover {
color: #fff!important;
background-color: #000!important;
}
/*tour section END*/
/*CONTACT SECTION*/
#contact {
width: 100%;
}
#contact textarea {
resize: none;
}
在此先感谢您对我的帮助!
最佳答案
在body标签中添加overflow-x hidden即可:
body {
background-image: url(../resources/splash.jpg);
background-size: cover;
background-color: #fff;
background-repeat: no-repeat;
overflow-x: hidden;
}
关于php - 页面宽度大于应有的宽度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46132938/