我制作了一个全屏表格，但它干扰了导航栏答案

【问题标题】：I made a full screen table but it interferes with navbar我制作了一个全屏表格，但它干扰了导航栏
【发布时间】：2020-03-30 02:39:17
【问题描述】：

我是 HTML 和 CSS 的新手，我试图制作一个响应式的全屏表格，但因为它我不能使用导航栏。这可能是因为 position: absolute 属性，但我不知道如何在不破坏它的情况下更改它。

如果我更改 position: absolute 属性或将其删除，则该表完全被破坏。

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>

【问题讨论】：

标签： javascript html css responsive-design

【解决方案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>

【讨论】：

还有什么方法可以让表格从导航栏下方开始？
是的，您可以通过调整表中顶部的值，例如 top:20px;
您可以根据自己的需要进行调整
坚持下去需要时间，我建议你学习 flex-box 和 grid 以获得现代和快速的方法，grid 和 flex make前端开发的生活轻松
我要搜索一些关于它们的教程