Question

点击LEFT-您会看到-它失去了100％的高度。无论LEFT是否可见，如何使TOP始终保持全高。

$('.left').on('click', function() {
  $('#top').slideToggle();
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='top' id='top'>TOP</div>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

Answer 1

在height:inherit CSS中使用left可能会解决您的问题

.left {
  background: lightblue;
  height:inherit
}

$('.left').on('click', function() {
  $('#top').slideToggle();
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
  height:inherit
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='top' id='top'>TOP</div>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

Answer 2

只需将public static void excelFileReadAndUpdate() throws IOException { final File file = new File("location of your excel file directory"); file.setReadable(true, false); file.setExecutable(true, false); file.setWritable(true, false); XSSFWorkbook wb = new XSSFWorkbook(new FileInputStream("./src/test/resources/testdata/HoldingDataWeekendDate.xlsx")); FileOutputStream fileOut = new FileOutputStream("./src/test/resources/testdata/HoldingDataWeekendDate.xlsx"); XSSFSheet sheet1 = wb.getSheetAt(0); XSSFRow row = sheet1.getRow(1); XSSFCell cell = row.getCell(0); cell.setCellValue("2018-10-31"); wb.write(fileOut); fileOut.close(); }添加到height: 100vh;

.left in css

.left {
  background: lightblue;
  height: 100vh;
}

$(document).ready(function() {
  $('.left').on('click', function() {
    $('#top').slideToggle();
  });
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
  height: 100vh;
}

Answer 3

要顺利完成此任务，您需要做两件事。

第一件事是您需要了解，当您切换某些内容时，它会从DOM中消失，这意味着将接收grid-template-rows的第一个元素将是left元素。您希望该价格为1fr。

第二个是时间。由于这些功能是非阻塞的，因此，如果您在一行中设置动画并在下一行更改属性，则它们将并行运行。如果将它们附加到slideToggle，则可以将其执行推迟到动画结束时执行。 http://api.jquery.com/slidetoggle/

希望有帮助：）

$('.left').on('click', function() {
  $('#top').slideToggle(( 800, function() {
    $('.parent').css('grid-template-rows', '1fr');
  }));
});

.parent {
  position: fixed;
  width: 70%;
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: auto 1fr;
  grid-gap: 5px;
  height: 100vh;
  background: lightgreen;
}

.top {
  grid-column: auto / span 2;
  background: gold;
  padding: 25px 0;
}

.left {
  background: lightblue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='parent'>
  <div class='top' id='top'>TOP</div>
  <div class='left'>LEFT</div>
  <div class='right'>RIGHT</div>
</div>

在幻灯片上保持单元格高度为100％

3 个答案: