Question

我已经创建了一个基于Web的电子学习模块。用户将使用Web浏览器查看和浏览模块。我有两个分别标记为“后退”和“下一个”的按钮，供用户浏览模块。每个页面上的所有内容均由PHP数组控制，以将用户看到的文本放置在页面上。我的HTML / PHP代码是：

<div id="white">

        <div id="header">
            <img id="header_logo"  src="./images/tfx_logo3.png" /img>
            <div id="mod-title">
                <div id="tab-shape"></div>
                <h1><?php echo $module; ?></h1>
            </div>
            <div id="nav-bar">
                <ul class="tabs">
                    <li><a href="./main_menu.php">Myths</a></li>
                </ul>
            </div>  
        </div>


        <h2><?php echo $heading[$page-1]; ?></h2>

        <div class ="ref">

            <?php echo $ref[$page-1];?>
        </div>

        <div class="nav-btns">
            <?php

                if ($page != 1) {
                    echo '<a id="prev" href="' . $filename . '.php?page=' . ($page-1) . '">Back</a>';
                }

                if (!in_array($page+1, $progress_pages) && $page != $last_page) {           
                    echo '<a id="next" href="' . $filename . '.php?page=' . ($page+1) . '">Next</a>';
                }
                else {
                    echo '<a id="next" href="progress_check.php?page=' . ($page+1) . '">Next</a>';
                }


                ?>

        </div>

我的问题是导航按钮“后退”和“下一步”出现在内容顶部，如下所示：

该如何解决？这是CSS问题吗？ CSS是

.ref{
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    overflow-x: hidden;
    border:  1px, solid #ccc;
    padding: 0px 7px;

}

.nav-btns {
    width: 100%;
    position: absolute;
    top:600px;
}

Answer 1

尝试更改

.nav-btns {
    width: 100%;
    position: absolute;
    top:600px;
}

到

.nav-btns {
    width: 100%;
    display: block;
}

让我知道结果！

Answer 2

要在页面底部添加它（就像'sticky-footer'一样），可以使用flexbox。参见下面的示例。

.nav-btns {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.nav-btns a {
  display:inline-block;
  line-height:20px;
  color: #fff;
  background: blue;
  padding: 5px 40px;
  margin: 0 5px;
  text-decoration: none;
}
#white {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.ref {
   flex: 1;
}
body { 
  margin:0 
}

<div id="white">
  <div id="header">
    <h1>Header here</h1>
  </div>
  <div class="ref">

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
   
     

  </div>
  <div class="nav-btns">
    <a href="#">Back</a>
    <a href="#">Next</a>
  </div>
</div>

Answer 3

代码中的问题是您使用的是absolute职位。相反，您应该使用fixed位置。这样可以解决您的问题。而且，您需要向内容padding-bottom中添加div，以使内容不会在导航后退。

另外，除非您在javascript中使用它们，否则我建议使用class而不是id。如果您想使用的话，我已经创建了一个快速的基本结构。

*, *:before, *:after {
    box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    min-height: 100%;
    font-family: 'Arial', sans-serif;
}

.wrapper {
    background-color: #fff;
}

.container {
    display: flex;
    flex-direction: column;
}

.header {
    min-height: 50px;
    background-color: #666;
}

.content {
    width: 90%;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;

    /* Padding bottom should be same as footer height.
     * Increase this value if there is increase in navigation height
     */
    padding-bottom: 36px;
}

.nav {
    background-color: #eee;
    text-align: center;
    padding: 4px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.nav a {
    font-size: 16px;
    background-color: #00c8ff;
    color: #fff;
    display: inline-block;
    padding: 5px 10px;
    text-decoration: none;
}

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>

<div class="wrapper">
    <div class="container">

        <div class="header"></div>

        <div class="content">
            <h2>Myth#1</h2>
            <div class="content-inner">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores, culpa earum illo inventore, laudantium maxime non numquam omnis quo quod tempore, veritatis vitae voluptas.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur atque blanditiis corporis illum, soluta unde. At deleniti doloribus minima optio! Aspernatur atque illo ipsam ipsum labore modi omnis provident quasi. Adipisci assumenda aut eius enim expedita facilis labore magnam nihil porro, quod rem repudiandae tenetur? Delectus doloremque ex modi perferendis possimus! Cumque eaque harum obcaecati quaerat. A ab consequatur dolorum error est eveniet fugit harum, hic ipsam ipsum laboriosam libero magnam mollitia nemo nulla obcaecati repellendus sapiente similique unde voluptate! Amet, deleniti illum libero nemo repudiandae sapiente tenetur veritatis. Ad blanditiis, commodi corporis, delectus doloremque expedita facere illo iusto natus necessitatibus nesciunt nobis obcaecati odio qui sequi sint vel. Accusamus ad adipisci asperiores atque autem cum dolor dolore dolores doloribus dolorum ducimus esse eum fuga fugit illo ipsa ipsam iste laborum magni, minima numquam obcaecati odio perferendis perspiciatis placeat quae quam qui quidem ratione rem reprehenderit repudiandae, sequi suscipit.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque culpa delectus doloribus ducimus et, facere labore laborum maxime nam nesciunt quaerat quas quidem suscipit tempora veritatis voluptatibus! Ipsa nobis similique vero voluptatem? Ab accusamus alias aliquid animi consectetur corporis delectus dolorem eaque eligendi error esse et expedita facere, hic id illo illum in ipsum labore maiores molestiae nam odit placeat porro provident quaerat qui quisquam ratione reiciendis sint sunt totam vel voluptas? Accusantium adipisci, consequuntur fugit illo itaque sapiente temporibus? Architecto, cupiditate eius, esse et ex illum inventore labore magnam maiores omnis quae, quod quos rem repellat similique voluptatum!</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores, culpa earum illo inventore, laudantium maxime non numquam omnis quo quod tempore, veritatis vitae voluptas.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur atque blanditiis corporis illum, soluta unde. At deleniti doloribus minima optio! Aspernatur atque illo ipsam ipsum labore modi omnis provident quasi. Adipisci assumenda aut eius enim expedita facilis labore magnam nihil porro, quod rem repudiandae tenetur? Delectus doloremque ex modi perferendis possimus! Cumque eaque harum obcaecati quaerat. A ab consequatur dolorum error est eveniet fugit harum, hic ipsam ipsum laboriosam libero magnam mollitia nemo nulla obcaecati repellendus sapiente similique unde voluptate! Amet, deleniti illum libero nemo repudiandae sapiente tenetur veritatis. Ad blanditiis, commodi corporis, delectus doloremque expedita facere illo iusto natus necessitatibus nesciunt nobis obcaecati odio qui sequi sint vel. Accusamus ad adipisci asperiores atque autem cum dolor dolore dolores doloribus dolorum ducimus esse eum fuga fugit illo ipsa ipsam iste laborum magni, minima numquam obcaecati odio perferendis perspiciatis placeat quae quam qui quidem ratione rem reprehenderit repudiandae, sequi suscipit.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque culpa delectus doloribus ducimus et, facere labore laborum maxime nam nesciunt quaerat quas quidem suscipit tempora veritatis voluptatibus! Ipsa nobis similique vero voluptatem? Ab accusamus alias aliquid animi consectetur corporis delectus dolorem eaque eligendi error esse et expedita facere, hic id illo illum in ipsum labore maiores molestiae nam odit placeat porro provident quaerat qui quisquam ratione reiciendis sint sunt totam vel voluptas? Accusantium adipisci, consequuntur fugit illo itaque sapiente temporibus? Architecto, cupiditate eius, esse et ex illum inventore labore magnam maiores omnis quae, quod quos rem repellat similique voluptatum!</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores, culpa earum illo inventore, laudantium maxime non numquam omnis quo quod tempore, veritatis vitae voluptas.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur atque blanditiis corporis illum, soluta unde. At deleniti doloribus minima optio! Aspernatur atque illo ipsam ipsum labore modi omnis provident quasi. Adipisci assumenda aut eius enim expedita facilis labore magnam nihil porro, quod rem repudiandae tenetur? Delectus doloremque ex modi perferendis possimus! Cumque eaque harum obcaecati quaerat. A ab consequatur dolorum error est eveniet fugit harum, hic ipsam ipsum laboriosam libero magnam mollitia nemo nulla obcaecati repellendus sapiente similique unde voluptate! Amet, deleniti illum libero nemo repudiandae sapiente tenetur veritatis. Ad blanditiis, commodi corporis, delectus doloremque expedita facere illo iusto natus necessitatibus nesciunt nobis obcaecati odio qui sequi sint vel. Accusamus ad adipisci asperiores atque autem cum dolor dolore dolores doloribus dolorum ducimus esse eum fuga fugit illo ipsa ipsam iste laborum magni, minima numquam obcaecati odio perferendis perspiciatis placeat quae quam qui quidem ratione rem reprehenderit repudiandae, sequi suscipit.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur atque culpa delectus doloribus ducimus et, facere labore laborum maxime nam nesciunt quaerat quas quidem suscipit tempora veritatis voluptatibus! Ipsa nobis similique vero voluptatem? Ab accusamus alias aliquid animi consectetur corporis delectus dolorem eaque eligendi error esse et expedita facere, hic id illo illum in ipsum labore maiores molestiae nam odit placeat porro provident quaerat qui quisquam ratione reiciendis sint sunt totam vel voluptas? Accusantium adipisci, consequuntur fugit illo itaque sapiente temporibus? Architecto, cupiditate eius, esse et ex illum inventore labore magnam maiores omnis quae, quod quos rem repellat similique voluptatum!</p>
            </div>
        </div>

        <div class="nav">
            <a href="#" class="nav-prev">Prev</a>
            <a href="#" class="nav-next">Next</a>
        </div>

    </div>
</div>

</body>
</html>

如何使用CSS

3 个答案: