Я сделал полноэкранный стол, но это мешает Navbar - PullRequest
Новая
       4

Я сделал полноэкранный стол, но это мешает Navbar

0 голосов
/ 29 марта 2020

Я довольно новичок в HTML и CSS, и я попытался сделать полноэкранную таблицу, которая отзывчива, но из-за этого я не могу использовать панель навигации. Вероятно, это из-за свойства 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>

1 Ответ

0 голосов
/ 29 марта 2020

Теперь я немного отредактировал вашу панель навигации:

Если вы хотите использовать абсолютное позиционирование, вы можете просто добавить position: относительный; к панели навигации и более высокий ** z -индекс * 

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>
...