Question

我正在使用两个div相对并相互重叠，顶部位置为：-400px。

它下面的所有内容都有-800px的顶部，以便内容增加。一切都很好，如果页面底部有800px的空间，因为浏览器仍然认为当内容实际上是-400px时，内容是那么远。

帮助？

以下是我的代码供您查看：http://theproagency.com/WeddingHub

我正在寻找一个CSS修复 - 我已经可以用JS修复它了 document.height = document.height - 800px或w.e

所有帮助表示赞赏。

由于

P.S。我也想知道在所有情况下如何解决这个问题。如果在我构建网站的未来情况下会发生这种情况怎么办？我以为自己在建立网站方面经验丰富，但是这个网站让我陷入困境

Answer 1

我做了一些改变。请将此正文复制到您的代码中。你应该备份。

<body>
<header class="topBar">
<div class="wrapper">
    <div class="socialMedia"><a href="#"><img src="images/fbico.jpg" width="29" height="30" alt=""></a><a href="#"><img src="images/linkedinico.jpg" width="30" height="30" alt=""></a><a href="#"><img src="images/twitterico.jpg" width="30" height="30" alt=""></a></div>
    <nav class="secondaryNav">
        <ul>
            <li><a href="mailto:support@weddinghubs.com">support@weddinghubs.com</a></li>
            <li class="phoneNumberBTN teal"><a href="tel:1-360-870-1081" class="telLarge">1 (360) 870-1081</a></li>
        </ul>
    </nav>
    <div class="clearfloat"></div>
</div>
</header>
<div class="aboveSlider">
<div class="wrapper">
    <nav class="topNav">
        <ul>
            <li class="logo"><a href="index.html"><img src="images/logo.jpg" width="148" height="60" alt=""></a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Packages</a></li>
            <li><a href="#">Blog</a></li>
            <li><a href="#">Designs</a></li>
            <li><a href="#">We Can Help</a></li>
        </ul>
    </nav>
</div>
</div>
<!--I removed your class="opaqueOverlay". And also I included wrapper class to flowerBG class. -->
<div class="flowerBG">
<div class="wrapper">
    <div class="slider">
        <hgroup>
            <h1>Wedding websites &amp; invitations</h1>
            <h5>We specialize in websites &amp; invitations for the special day.</h5>
        </hgroup>
        <a href="#">
            <div class="getStartedBTN">Get Started</div>
        </a> </div>
</div>
</div>

<!--end wrapper and slider -->
<!--begin mainContent .wrapper -->
<main role="main" class="mainContent wrapper">
<article>
    <header>
        <hgroup class="us">
            <h1 class="weare">The Wedding Specialists</h1>
            <h2 class="wedo">Invites, designs &amp; more.</h2>
        </hgroup>
    </header>
    <p class="contentLeft"> Hello,<br>
        <br>
        We are weddinghubs.com and we specialize in websites &amp; invitations for fiances
        and newly weds. Our service is invaluable for any new couple who is planning on
        marriage. We handle everything from domain registration, page creation and even let you choose when you want the website and service to go live. We also have password protection services and auto account creation for digital invitee’s so only select guests will be able to see your beautiful website. Away from the eyes of the public. Though if you would like a public website - we will do and handle that too. As we understand weddings are amazing milestones. The start to the next chapter of your life and people around you.<br>
        <br>
        <strong>Regards,</strong><br>
        <span class="signature">Kyle L.Scott</span><br>
        WeddingHubs.com Owner </p>
    <aside class="information">
        <h1>Website Features</h1>
        <ul>
            <li>RSVP Tracker</li>
            <li>Photosharing</li>
            <li>Wedding Countdown</li>
            <li>Unique Designs</li>
            <li>Driving Directions</li>
            <li>and so much more.</li>
        </ul>
    </aside>
</article>
</main>
</body>

我也对班级做了一些改变=＆＃34; flowerBG＆＃34;在css。我删除了顶部空格。我使用CSS3 Gradients。

.flowerBG {
height: 400px;
position: relative;
background: linear-gradient(rgba(0, 0 ,0 , .55), rgba(0, 0 ,0 , .55)), url(../images/banner.jpg);}

类的变化=＆＃34;滑块＆＃34;在css。我删除了顶部空格。

.slider {
height: 400px;
position: relative;

}

css中mainContent类的更改。我删除了顶部空格。

.mainContent {
position: relative;
}

我希望你现在有一个解决方案。谢谢！

文档高度因位置相对而较高

1 个答案: