由于位置相对，文档高度更高

我正在使用 2 个相对定位的div 并以 top：-400px 的位置相互重叠。

它下面的所有内容都有一个 -800px 的顶部，以便内容向上推送。无论页面底部有 800px 的空间，一切都显示得很好，因为浏览器仍然认为内容在实际为 -400px 时很远。

帮助？

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

我正在寻找CSS修复程序-我已经可以使用JS解决此问题文档高度 = 文档高度 - 800 像素或 w.e

所有的帮助都表示赞赏。

谢谢

附言我也想知道如何在所有情况下解决这个问题。如果在将来构建网站时发生这种情况怎么办？我以为我在建立网站方面经验丰富，但这个让我陷入困境

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

<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>

我还在css中对class="flowerBG"进行了一些更改。我删除了顶部空格。我使用了CSS3渐变。

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

类="滑块"在 CSS 中的更改。我删除了顶部空格。

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

}

在 css 中更改主内容类。我删除了顶部空格。

.mainContent {
position: relative;
}

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

相关内容

最新更新

热门标签：