CSS网格行不起作用

时间:2018-05-22 22:53:24

标签: html css css3 css-grid

我可以让div移动到正确的列但不是正确的行。

这将在正确的列中显示蓝色矩形,但无论出于何种原因,它都没有移动到我需要它的行。谢谢大家的帮助。

body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}
<div id="navigation"></div>
<div id="menunBar"></div>
<div id="mainContent"></div>

1 个答案:

答案 0 :(得分:4)

您使用百分比来设置行高。这意味着a parent reference is required

在网格容器上设置高度。

function test() {
  var n = "seperatertext";
  var this_file = SpreadsheetApp.getActive();
  var this_sheet = this_file.getSheets()[0];
  this_file.setActiveSheet(this_sheet); 
  /* var that needs to change from script to script */
  var target = SpreadsheetApp.openById('1F1bH0dzR5-UglxWtByS3ojePVEG2aW7qISOgNQ43fz8'); /* <<<< CHANGE THE ID >>>> */
  /* Give an indication to the use that the script is working*/
  var faqlist = this_file.getRange("A1:A").getValues();
  var faqnum = faqlist.filter(String).length;
  var n = [];
  for(var i = 2; i <= faqnum; i++) {
   first = "A".concat(i);
   second = "B".concat(i);
   n.push(this_file.getRange(first).getValue(),"seperatertext", this_file.getRange(second).getValue(),"seperatertext");
  }
  return n;
}
body {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 10% 80% 10%;
  height: 100vh; /* new */
}

#navigation {
  grid-column: 2/2;
  grid-row: 2/2;
  height: 400px;
  width: 100%;
  background-color: blue;
}

body {
  margin: 0;
}

更多详情: