Question

我正在制作一个基本上由三个部分组成的网站，即顶部导航菜单栏，主要部分和页脚。问题是我使用的是Bootstrap和“ container-fluid h-100”类，因此当主部分未填满视口时，页脚始终停留在底部，但是使用了jQuery navbar，我首先假设网站处理此操作“ container-fluid h-100”命令，然后当jquery导航栏出现在顶部时，我在主部分和页脚之间有或的空白。我认为这是因为菜单将所有内容向下移动，从而在底部创建了该空白空间，因为保留在下方的空间与导航栏的高度完全相同。除此之外，我还有一个小div，仅在小型设备中可见，当我将窗口调整为较小的尺寸并出现该div时，这也会产生更多的空白。

代码：

<html>
<head>
    <meta charset="utf-8">
    <title>Test</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="general.css">
<link rel="stylesheet" type="text/css" href="menubar.min.css">  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
    $("#section").load("home.html")
    });
</script>
<script type="text/javascript" src="menubar.min.js"></script>
</head>
<body>
    <div class="container-fluid h-100">
    <nav id="cssmenu">
        <ul>
        <li><a href="home.html">HOME</a></li>
        </ul>   
    </nav>
    <div class="row d-block d-sm-none">
      <div class="col-md-12">
        <p style="background-color:#974073; color:#ECECEC; text-align:center; margin-bottom:0; opacity:0.9;">
          You are seeing a reduced version for small devices.
        </p>
        </div>
    </div>
    <section class="row justify-content-center h-100" id="section"></section>
    <footer>All rights reserved</footer>
</div>
</body>
</html>

仅此而已！预先感谢，问候... 莱安德罗。

js菜单栏加载时“容器流体h-100”的尺寸过大

0 个答案: