Je crée une page pour montrer des vues agrandies d'une photographie. Je veux que la page affiche un en-tête en haut, un pied de page en bas et l'image de la photographie remplissant tout l'espace entre l'en-tête et le pied de page. Les photographies ont des tailles variables et peuvent avoir une orientation paysage ou portrait. Je n'ai aucune difficulté à dimensionner la largeur de la fenêtre. Je n'ai aucun problème à le faire si la page ne contient que l'image et rien d'autre. Malgré la recherche, la lecture et les essais et erreurs, je ne peux pas discerner comment dimensionner le contenu verticalement pour respecter cette directive. Par exemple:

<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    <h1>Image</h1>
    <p>An image that should fill up the space in between</p>
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
    xxxxxxxxxxxxx<br />
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>

Ce n'est peut-être pas possible. Des idées?

0
Robert Taylor 7 avril 2020 à 23:39

3 réponses

Meilleure réponse

La mise en page est en fait totalement possible, mais nécessite une légère modification de votre code HTML. Vous voudrez encapsuler vos éléments <header>, <main> et <footer> dans une div wrapper, qui est définie sur display: flex; flex-direction: column, afin qu'ils utilisent CSS flexbox pour effectuer l'espace- remplir les exigences de mise en page.

Ensuite, dans l'élément <main>, vous faites la même astuce CSS flexbox. Cependant, vous devez encapsuler votre élément <img> avec un <div>, qui est configuré pour s'étendre à l'espace disponible.

Jusqu'à présent, votre mise en page ressemblera à ceci:

<div class="wrapper">
  <header><!-- Header content --></header>
  <main>
    <!-- More content -->
    <div class="image">
      <img src="..." />
    </div>
  </main>
  <footer><!-- Footer content --></footer>
</div>

Votre élément <img> est alors défini pour se positionner absolument, couvrant complètement son parent <div> et tirant parti de object-fit: cover pour se redimensionner pour remplir tout l'espace tout en préservant les proportions.

Voici un exemple de preuve de concept. Cependant, vous voudrez peut-être l'afficher en pleine page (ou consultez cette JSFiddle), car le code L'aperçu en ligne d'extrait est trop petit pour illustrer la mise en page:

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.wrapper {
  display: flex;
  flex-direction: column;
  height: 100%;
}

header, footer {
  background-color: steelblue;
  color: #eee;
}

main {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.image {
  flex: 1 1 100%;
  position: relative;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  object-fit: cover;
}
<div class="wrapper">
  <header>
      <h1>Some header stuff</h1>
      <p>Such as a navigation bar at the top of the viewport.</p>
  </header>
  <main>
      <h1>Image</h1>
      <p>An image that should fill up the space in between</p>
      <div class="image">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" />
      </div>
  </main>
  <footer>
      <h1>Some footer stuff</h1>
      <p>Such as a logo, link to privacy page etc.</p>
  </footer>
</div>
0
Terry 7 avril 2020 à 21:01

Voici ma solution intégrant les idées de Terry:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <style>
    * {
      box-sizing: border-box;
    }
    
    html,
    body {
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    header,
    footer {
      background-color: steelblue;
      color: #eee;
      padding-left: 2rem;
    }
    
    main {
      flex: 1 1 100%;
      display: flex;
      flex-direction: column;
      height: 100%;
      padding-left: 2rem;
    }
    
    .body-wrapper {
      display: flex;
      flex-direction: column;
      height: 100%;
    }
    
    .image-wrapper {
      flex: 1 1 100%;
      position: relative;
    }
    
    img {
      display: block;
      max-width: 100%;
      max-height: 100%;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      object-fit: cover;
    }
  </style>
</head>

<body>
  <div class="body-wrapper">
    <header>
      <h1>Navigation Bar Goes Here</h1>
    </header>
    <main>
      <h1>Photo Caption Goes Here</h1>
      <div class="image-wrapper">
        <img src="https://images.unsplash.com/photo-1586109803336-c02797ffdcc0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=634&q=80" alt="Photo: Copy of Photo Captions Goes Here" />
      </div>
      <h2>The Album Caption Goes here</h2>
    </main>
    <footer>
      <h1>Footer Goes Here</h1>
    </footer>
  </div>
</body>

</html>
0
Robert Taylor 8 avril 2020 à 02:30
header{
height:10vh;
}
footer{
height:10vh;
}
main{
height:65vh;
background:url("https://www.bing.com/th?id=ABT63B35E950543A69BB040AEFA5BFCA186A43A5798E5E9B96844F4CE0ED7176910&w=608&h=200&c=2&rs=1&pid=SANGAM") no-repeat center center fixed;
background-size:cover;
}
<header>
    <h1>Some header stuff</h1>
    <p>Such as a navigation bar at the top of the viewport.</p>
</header>
<main>
    
</main>
<footer>
    <h1>Some footer stuff</h1>
    <p>Such as a logo, link to privacy page etc.</p>
</footer>
0
DCR 7 avril 2020 à 20:58