Question

我想使用锚标记从主页顶部移动到主页的下半部分。主页的下半部分是div，就像另一个页面一样，只是它在同一页面上。它被称为find-vegan-products-page，上面有一个表单。该表单的margin-top为100px，因此它不在find-vegan-products-page表单的顶部。我希望锚点将用户带到find-vegan-products-page的顶部，显示100px的边距（因此表单不在页面的最顶部。但它会转到表单的顶部。我认为这是因为表单上面没有任何内容可以导致100px的上边距向下推动表单。这是我的意思的照片：

这是我的代码：

HTML：

<body>
    <div style="margin-bottom: 100px;" class="full_size dimmed">
        <div style="position:fixed; z-index: -1;">
        <video style="position:fixed;" autoplay loop poster="assets/images/home_page/polina.jpg" id="bgvid">
            <!--<source src="polina.webm" type="video/webm">-->
            <source src="assets/videos/polina.mp4" type="video/mp4">
        </video>
        </div>

        <div class="header dim">
            <a href="http://www.w3schools.com" ><h5 id="app-name" class="nav-item clickable white-text medium-text left-text">THE VEGAN REPOSITORY</h5></a>
            <a href="http://www.w3schools.com" ><h5 (click)="clicked()" id="sign-in-button" class="nav-item clickable brand-colour-text medium-text right-text with-border">SIGN UP FREE</h5></a>
            <a href="http://www.w3schools.com" ><h5 class="nav-item clickable white-text medium-text right-text">LOGIN</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >BLOG</h5></a>
            <a href="#home_page_footer" ><h5 class="nav-item clickable white-text medium-text right-text" >ABOUT</h5></a>

        </div>

        <div id="motto-text" class="vertical-center">
            <h5 class="white-text medium-text">THE VEGAN REPOSITORY</h5>
            <h1 id="main-text" class=" text-center white-text light-text extra-large-text">FIND VEGAN PRODUCTS NEAR YOU</h1>
            <a id="try-now-button" class="with-border clickable" href="#find-vegan-products-page" ><h5  class=" text-center medium-text">TRY NOW</h5></a>
        </div>
    </div>

    <!-- <div id="googleMap" style="height:500px;"></div> -->

    <div id="find-vegan-products-page" style="height:900px;">
        <div class="form-background">



            <form role="form" style="padding: 40px;">
                <div class="form-group">
                    <input type="text" class="form-control input-control" placeholder="Country">
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="City">
                </div>
                <div class="checkbox">
                    <label><input type="checkbox"> Remember me</label>
                </div>
                <button type="submit" class="btn btn-default">Submit</button>
            </form>
        </div>
    </div>

</body>

CSS：

.input-control {
    height: 5rem;
    width: 49%;
    display: inline-flex;
    background-color: transparent;
    border: none;
}

.form-background {
    background: rgba(149, 246, 102, .5);
    margin: 100px 100px 0px 100px;
}

如何让锚点移动页面，使表格顶部与屏幕顶部之间有100px的间隙？

Answer 1

试试这个css：

.form-background {
background: rgba(149, 246, 102, .5);
}

#find-vegan-products-page {
padding: 100px;
margin-top: 100px; /*separate the div from top of the page*/
}

锚标记到同一页面部分移动太低

1 个答案: