как установить высоту элемента сетки как остальное пространство

sqlite - это база данных документов, означающая, что она в значительной степени похожа на плоский файловый хранилище ваших данных с самым минимальным движком базы данных сверху, поэтому она равна 300kb. Что вы можете сделать в качестве решения, это скопировать db из вашего удаленного местоположения в ваше местоположение через ftp или получить доступ к нему, назначив ему сетевое расположение. Будьте осторожны, хотя только один пользователь может писать в sqlite за раз.

1
задан kukkuz 20 March 2019 в 10:12
поделиться

2 ответа

Просто я добавил max-height для вашего класса grida,gridb на основе вашей высоты сетки. Комментарий для получения дополнительной информации. Я надеюсь, что это решение будет полезным.

* {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: lightseagreen;
    color: white;
    height: 27px;
}

.grid {
    position: fixed;
    top: 27px;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    height: calc(100vh - 27px);
    grid-column-gap: 9px;
    background: silver;
}

.grida,
.gridb {
    display: grid;
    grid-template-rows: auto 1fr;
    background: gold;
    max-height: calc(100vh - 27px);
}

.divtop {
    background: lightgreen;
    height: auto;
}
.story {
    overflow-y: scroll;
}
<div class='navbar'>NAVBAR</div>
<div class='grid'>
    <div class='grida'>
        <div class='divtop'>TOP</div>
        <div class='story'>STORY</div>
    </div>
    <div class='gridb'>
        <div class='divtop'>TOP</div>
        <div class='story'>STORY</div>
    </div>
</div>

0
ответ дан Saravana 20 March 2019 в 10:12
поделиться

Вот простой макет сетки - поскольку вы используете макет, заполняющий область просмотра, я думаю, что вы можете отказаться от фиксированного и фиксированного позиционирования и вложенных сеток , удалить внутреннюю сетку контейнеры (grida и gridb) и упаковывают в контейнер :

display: grid;
grid-template-columns: 1fr 1fr; /* two columns */
grid-template-rows: auto auto 1fr; /* three rows */
grid-auto-flow: column; /* place grid items in column direction */

Теперь вы можете использовать grid-column: span 2 для navbar - см. демонстрацию ниже:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

.wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  grid-auto-flow: column; /* place grid items in column direction */
  grid-column-gap: 9px;
  height: 100vh;
}
.navbar {
  background: lightseagreen;
  color: white;
  height: 27px;
  grid-column: span 2; /* span both columns */
}
.grid {
  background: silver;
}

.divtop {
  background: lightgreen;
}

.story {
  overflow-y: auto; /* overflow of content */
  background: gold;
}
<div class="wrapper">
  <div class='navbar'>NAVBAR</div>
  <div class='divtop'>TOP</div>
  <div class='story'>
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
    here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
    text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here
  </div>
  <div class='divtop'>TOP</div>
  <div class='story'>
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text
    here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some
    text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here some text here
    some text here some text here some text here some text here
  </div>
</div>

0
ответ дан kukkuz 20 March 2019 в 10:12
поделиться