Hice el siguiente diseño de cuadrícula (para un próximo cliente de correo electrónico):

body
{
  margin:0px;
  font-family:tahoma;
  font-size:12px;
}

.grid-container {
  display: grid;

  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";

  grid-template-columns: 200px 1fr;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
  grid-gap: 0px;

  height: 100vh;
}

.header {
  grid-area: header;
  background:#aaa;
}

.mailboxes
{
  grid-area: mailboxes;
  background:#ccc;
}

.footer
{
  grid-area: footer;
  background:#aaa;
}

.gMessages
{
  grid-area: messages;
  background:#bbb;
}

.viewer
{
  grid-area: viewer;
  background:white;
}
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages
        </div>

        <div class="viewer">
        </div>
    </div>

Ver también aquí: https://jsfiddle.net/w4m1psnh/4/

Es sensible y todo está bien. El problema es que, al completar datos en el Área de mensajes (.gMessages), el área se ampliará y destruirá mi diseño:

enter image description here

También amplía la página para que el pie de página se vuelva invisible. No pude descubrir cómo mantener el área en su altura fija y también mantener todo el diseño receptivo (mensajes: 30% de altura, espectador 70% de altura). También intenté asignar una altura fija y aplicar superposición-y al contenido del Mensaje, sin éxito. Entonces, ¿cómo forzaría el diseño de la cuadrícula para mantener sus dimensiones asignadas?

1
Fuxi 24 abr. 2020 a las 18:04

2 respuestas

¿Por qué estás definiendo grid-template-rows dos veces?

.grid-container {
  display: grid;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
}

No hay necesidad de eso. El navegador (durante la cascada) simplemente invalida la primera regla y usa la segunda. En otras palabras, la primera regla se ignora.

enter image description here

Elija uno u otro, o simplemente use auto (altura basada en contenido).

Agregue esto a su código:

.grid-container {
  display: grid;
  /* grid-template-rows: 34px 1fr 30% 34px; */
  grid-template-rows: 34px auto 1fr 34px; /* adjustment */
}

.gMessages {
  grid-area: messages;
  overflow: auto;  /* new */
}
.grid-container {
  display: grid;
  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";
  
  grid-template-columns: 200px 1fr;
  /* grid-template-rows: 34px 1fr 30% 34px; */
  grid-template-rows: 34px auto 1fr 34px; /* adjustment */
  height: 100vh;
}

.gMessages {
  grid-area: messages;
  background: #bbb;
  overflow: auto;  /* new */
}

.header {
  grid-area: header;
  background: #aaa;
}

.mailboxes {
  grid-area: mailboxes;
  background: #ccc;
}

.footer {
  grid-area: footer;
  background: #aaa;
}

.viewer {
  grid-area: viewer;
  background: white;
}

body {
  margin: 0px;
  font-family: tahoma;
  font-size: 12px;
}
<div class="grid-container">
  <div class="header">header</div>
  <div class="mailboxes">mailboxes</div>
  <div class="footer">footer</div>
  <div class="gMessages">text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text<br><br>text
    <div class="viewer"></div>
  </div>

jsFiddle demo

0
Michael_B 24 abr. 2020 a las 16:02

Tiene una fila que está configurada en 30% y una fila que no tiene nada que esté configurada en 70%.

Puede invalidar la fila vacía configurando su altura como vacía hasta que quiera usarla y maximizar la otra fila. También querrá administrar el desbordamiento y con esto porque eso solo hará que la página 'crezca'.

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
    body
{
  margin:0px;
  font-family:tahoma;
  font-size:12px;
}

.grid-container {
  display: grid;

  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";

  grid-template-columns: 200px 1fr;
  grid-template-rows: 34px 1fr 100% 34px;
  grid-template-rows: 34px 1fr 0% 34px;
  grid-gap: 0px;

  height: 100vh;
}

.header {
  grid-area: header;
  background:#aaa;
}

.mailboxes
{
  grid-area: mailboxes;
  background:#ccc;
}

.footer
{
  grid-area: footer;
  background:#aaa;
}

.gMessages
{
  grid-area: messages;
  background:#bbb;
  overflow-y: scroll;
}

.viewer
{
  grid-area: viewer;
  background:white;
}
</style>
</head>

<body>
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages
          <br/>
        </div>

        <div class="viewer">
        </div>
    </div>

</body>

</html>

Cambios:

overflow-y:

.gMessages
{
  grid-area: messages;
  background:#bbb;
  overflow-y: scroll;
}

100% vs 0%:

grid-template-columns: 200px 1fr;
grid-template-rows: 34px 1fr 100% 34px;
grid-template-rows: 34px 1fr 0% 34px;

Sin estos cambios, tal como está, tiene un espacio vacío en la página.

Si mantiene abierta la estética del panel apilado, puede forzarlo a permanecer estático aplicando overflow-y en .viewer y cambiando %heights, nuevamente:

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<title>TITLE</title>
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Coming+Soon">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Pacifico">
<link rel="stylesheet" href="assets/css/Footer-Basic.css">
<link rel="stylesheet" href="assets/css/styles.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<style>
    body
{
  margin:0px;
  font-family:tahoma;
  font-size:12px;
}

.grid-container {
  display: grid;

  grid-template-areas:
    "header header header"
    "mailboxes messages messages"
    "mailboxes viewer viewer"
    "footer footer footer";

  grid-template-columns: 200px 1fr;
  grid-template-rows: 34px 1fr 30% 34px;
  grid-template-rows: 34px 1fr 70% 34px;
  grid-gap: 0px;

  height: 100vh;
}

.header {
  grid-area: header;
  background:#aaa;
}

.mailboxes
{
  grid-area: mailboxes;
  background:#ccc;
}

.footer
{
  grid-area: footer;
  background:#aaa;
}

.gMessages
{
  grid-area: messages;
  background:#bbb;
  overflow-y: scroll;
}

.viewer
{
  overflow-y:scroll;
  grid-area: viewer;
  background:white;
}
</style>
</head>

<body>
    <div class="grid-container">
        <div class="header">header</div>
        <div class="mailboxes">mailboxes</div>
        <div class="footer">footer</div>

        <div class="gMessages">
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>
          messages
          <br/>

        </div>

        <div class="viewer">
        </div>
    </div>

</body>

</html>
2
Equinox 24 abr. 2020 a las 15:27