我制作了全屏 table 但它干扰了导航栏

Question

我是 HTML 和 CSS 的新手，我尝试制作全屏 table 响应式，但由于它我无法使用导航栏。可能是因为 position: absolute 属性但我不知道如何在不破坏它的情况下更改它。

如果我改变 position: absolute 属性或删除它，table 就完全毁了。

var table = document.getElementById("table");

var w = window.innerWidth;
var h = window.innerHeight;

var wsquare = 30, hsquare = 30;
var m = w / wsquare, n = h / hsquare;

for(var i = 0; i < n - 1; i++) {
  var row = table.insertRow(i);
  for(var j = 0; j < m - 1; j++) {
    var cell1 = row.insertCell(j);
  }
}

th, table, td{
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PathFinding</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Name</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
    <div class="table">
      <table id= "table">
      </table>
    </div>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

Answer 1

我做了一些编辑，现在你的导航栏工作正常了：

如果要使用绝对定位，只需将 position: relative; 添加到导航栏和更高的 **z-index*

var table = document.getElementById("table");

var w = window.innerWidth;
var h = window.innerHeight;

var wsquare = 30, hsquare = 30;
var m = w / wsquare, n = h / hsquare;

for(var i = 0; i < n - 1; i++) {
  var row = table.insertRow(i);
  for(var j = 0; j < m - 1; j++) {
    var cell1 = row.insertCell(j);
  }
}

nav {
position:relative;
z-index: 2;
}

table {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
}
th, table, td{
  border: 1px solid black;
  border-collapse: collapse;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>PathFinding</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  </head>
  <body>
    <nav class="navbar navbar-inverse">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Name</a>
        </div>
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
          <li><a href="#">Page 1</a></li>
          <li><a href="#">Page 2</a></li>
          <li><a href="#">Page 3</a></li>
        </ul>
      </div>
    </nav>
      <table id= "table">
      </table>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>

我制作了全屏 table 但它干扰了导航栏

I made a full screen table but it interferes with navbar

html

javascript

css

responsive-design