J'ai une disposition comme celle-ci

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

table {
  border: solid 1px;
}

.main-div {
  height: 100%;
}

.container {
  height: 100%;
}

.top {
  width: 100%;
  background: red;
}

.bottom {
  height: calc(100% - 1em);
  overflow-y: unset;
  background: blue;
}

.table-panel {
  overflow-y: scroll;
  height: 100%;
  background-color: green;
}

.working-area {
  height: calc(100% - 20px);
}

.footer {
  height: 20px;
}
<div class="main-div">
    <div class="working-area">
      <div class="container">
        <div class="top">
          some text some text some text some text some text some text some text some text some text some text some text some text
        </div>
        <div class="bottom">
          <div class="table-panel">
            <table>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
              <tr>
                <td>cell text</td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">footer text</div>
  </div>

L'idée principale de la mise en page est de voir le 'tableau-panneau' défiler en cas de débordement lors de l'utilisation du redimensionnement vertical. Mais l'habillage du texte pour le div «haut» lors du redimensionnement horizontal est également une exigence. Donc, si vous essayez de rendre le div «haut» plus élevé, le div «bas» recouvre le pied de page.

Je voudrais trouver un moyen de faire défiler le 'tableau-panneau' en cas de débordement sans aucun effet secondaire. J'ai essayé d'utiliser 'flex', mais je ne suis pas assez expérimenté en css donc je n'ai pas atteint mon objectif - le défilement est toujours perdu.

Y a-t-il un moyen de le faire sans js?

UPDATE: le résultat exact que j'aimerais voir, mais sans js https://jsfiddle.net/a4fay1r0/

1
GhfDllT 6 avril 2017 à 17:06

2 réponses

Je ne sais pas si c'est ce que vous recherchez, mais si vous changez le height de la classe .container en calc(100% - 20px); puisque votre pied de page est verrouillé à 20px, cela semble résoudre le problème.

ÉDITER: J'ai remarqué qu'il y avait encore un problème avec le redimensionnement. J'ai créé des conteneurs flexibles .container et .bottom et créé des enfants flexibles .bottom et .table-panel avec flex: 1; voir jsfiddle mis à jour

https://jsfiddle.net/g35ume3z/3/

0
philr 6 avril 2017 à 14:32

CSS Grid La mise en page peut faire cela maintenant.

Assistance est désormais disponible dans la plupart des navigateurs actuels.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.container {
  height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.container>* {
  border: 1px solid green;
}

.content {
  overflow-y: auto;
}
<div class="container">
  <header>HEADER</header>
  <div class="content">CONTENT
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure delectus iusto reiciendis nihil obcaecati expedita velit architecto ad! Cumque ex at accusantium illo ipsa tenetur reiciendis repudiandae quo, sint voluptate, eligendi libero assumenda
      animi in rerum! Quam quidem vero esse inventore a ab praesentium enim voluptatibus, vitae quae. Earum non provident, soluta dolor eius dolores accusamus, neque dicta vitae, deserunt, cum atque voluptates recusandae consequatur. Id sit nisi animi
      asperiores et reprehenderit dolore dolorum cupiditate distinctio, blanditiis mollitia temporibus saepe ipsa fuga odit quasi, dignissimos porro tempora libero, vitae perspiciatis autem ex aperiam quis. Hic eveniet at repellendus, sapiente. Molestias
      quaerat dolorem hic pariatur sunt aperiam, ea officia, laboriosam at vel reiciendis consectetur. Voluptate delectus ipsa doloremque, ratione eum. Eos in corporis rem aliquam! Unde consectetur, quo iure reprehenderit ex necessitatibus! Officiis iste
      aperiam explicabo cum, ipsum corporis optio voluptatum tenetur architecto fugiat sapiente fugit voluptatibus minus corrupti maxime minima nostrum consequatur! Temporibus vitae enim labore reiciendis natus est in doloribus velit dolor deserunt iusto
      pariatur quidem, omnis itaque possimus ratione, mollitia aperiam quod numquam, perferendis expedita. Corrupti dolor laboriosam quasi, dicta delectus, necessitatibus culpa saepe beatae fugiat non in architecto placeat alias! Accusamus iusto iste
      veritatis recusandae dolorum odio.</p>
  </div>
  <footer>FOOTER</footer>
</div>
0
Paulie_D 6 avril 2017 à 15:11