Блог

Главная - Вопросы по программированию - почему в нижней части div нет тега нижнего колонтитула?

почему в нижней части div нет тега нижнего колонтитула?

#html #css

#HTML #css

Вопрос:

Проблема с гибким и нижним колонтитулом

я бы хотел, чтобы это было похоже на нижний колонтитул изображения в нижней части моего div Я должен использовать гибкие теги Я искал решение на этом сайте, но не нашел подходящего для моего кода может кто-нибудь мне помочь, пожалуйста?

Я новичок в CSS flex elements

 .container {
  display: flex;
  margin-left: 10%;
}

.content {
  display: flex;
  flex-direction: column;
}

p {
  word-wrap: break-word;
  margin: 10px;
}

section {
  border: 6px solid rgb(231, 198, 106);
  border-radius: 2px;
  max-width: 30%;
  width: auto;
  margin-right: 10px;
}

section>footer {
  background-color: red;
  border-radius: 2px;
  padding-bottom: 0px;
  text-align: center;
  color: white;
}

h1 {
  text-align: center;
  margin: 0px;
}

header>h1 {
  padding: 15px;
  background-color: orange;
  color: white;
}  
 <!DOCTYPE html>
<html lang="fr">

<head>
  <!-- Entête  -->
  <meta charset="utf-8" />
  <title>Mes articles</title>
  <link rel="stylesheet" href="css7.1.css">
</head>

<body>
  <!-- contenu -->
  <!-- flex: 1; pour occuper l'espace restant -->

  <h1> Mes articles </h1>
  <div class="container">
    <section>
      <header>
        <h1>Article un </h1>
      </header>
      <div class="content">
        <p>
          Chaque section occupe environ 1/3 de la largeur totale <br>Le pied de section s'affiche toujours en bas.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article deux</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla. Fusce tellus ex, congue eget rhoncus ut, porttitor
          eu tortor. Sed vehicula scelerisque lectus eu imperdiet. Sed velit diam, lacinia eget felis vitae, ullamcorper condimentum nisi. Mauris pretium imperdiet augue ac venenatis. Integer sit amet ornare nunc. Vestibulum rhoncus tempor ipsum. Mauris
          et ultrices metus. Nam sit amet egestas sem, et hendrerit mi.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article trois</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla.
        </p>
      </div>
      <!-- /content -->

      <footer>footer<br>sur 2 lignes</footer>
    </section>
  </div>
</body>

</html>

[введите описание изображения здесь]

Я бы хотел, чтобы это было похоже на нижний колонтитул изображения в нижней части моего div Я должен использовать гибкие теги Я искал решение на этом сайте, но не нашел подходящего для моего кода может кто-нибудь мне помочь, пожалуйста?

Я новичок в CSS flex elements

Ответ №1:

Я считаю section , что это должен быть flex контейнер столбца, .content который можно растягивать через flex-grow :

 .container {
  display: flex;
  margin-left: 10%;
}

section {
  display: flex;
  flex-direction: column;
}

.content {
  flex-grow: 1;
}

p {
  word-wrap: break-word;
  margin: 10px;
}

section {
  border: 6px solid rgb(231, 198, 106);
  border-radius: 2px;
  max-width: 30%;
  width: auto;
  margin-right: 10px;
}

section>footer {
  background-color: red;
  border-radius: 2px;
  padding-bottom: 0px;
  text-align: center;
  color: white;
}

h1 {
  text-align: center;
  margin: 0px;
}

header>h1 {
  padding: 15px;
  background-color: orange;
  color: white;
}  
 <!DOCTYPE html>
<html lang="fr">

<head>
  <!-- Entête  -->
  <meta charset="utf-8" />
  <title>Mes articles</title>
  <link rel="stylesheet" href="css7.1.css">
</head>

<body>
  <!-- contenu -->
  <!-- flex: 1; pour occuper l'espace restant -->

  <h1> Mes articles </h1>
  <div class="container">
    <section>
      <header>
        <h1>Article un </h1>
      </header>
      <div class="content">
        <p>
          Chaque section occupe environ 1/3 de la largeur totale <br>Le pied de section s'affiche toujours en bas.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article deux</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla. Fusce tellus ex, congue eget rhoncus ut, porttitor
          eu tortor. Sed vehicula scelerisque lectus eu imperdiet. Sed velit diam, lacinia eget felis vitae, ullamcorper condimentum nisi. Mauris pretium imperdiet augue ac venenatis. Integer sit amet ornare nunc. Vestibulum rhoncus tempor ipsum. Mauris
          et ultrices metus. Nam sit amet egestas sem, et hendrerit mi.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article trois</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla.
        </p>
      </div>
      <!-- /content -->

      <footer>footer<br>sur 2 lignes</footer>
    </section>
  </div>
</body>

</html>

Другая возможность, связанная с section flex тем, что контейнер используется margin для footer того, чтобы он отправлял себя до самого низа.

 .container {
  display: flex;
  margin-left: 10%;
}

section {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top:auto;
}

p {
  word-wrap: break-word;
  margin: 10px;
}

section {
  border: 6px solid rgb(231, 198, 106);
  border-radius: 2px;
  max-width: 30%;
  width: auto;
  margin-right: 10px;
}

section>footer {
  background-color: red;
  border-radius: 2px;
  padding-bottom: 0px;
  text-align: center;
  color: white;
}

h1 {
  text-align: center;
  margin: 0px;
}

header>h1 {
  padding: 15px;
  background-color: orange;
  color: white;
}  
 <!DOCTYPE html>
<html lang="fr">

<head>
  <!-- Entête  -->
  <meta charset="utf-8" />
  <title>Mes articles</title>
  <link rel="stylesheet" href="css7.1.css">
</head>

<body>
  <!-- contenu -->
  <!-- flex: 1; pour occuper l'espace restant -->

  <h1> Mes articles </h1>
  <div class="container">
    <section>
      <header>
        <h1>Article un </h1>
      </header>
      <div class="content">
        <p>
          Chaque section occupe environ 1/3 de la largeur totale <br>Le pied de section s'affiche toujours en bas.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article deux</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla. Fusce tellus ex, congue eget rhoncus ut, porttitor
          eu tortor. Sed vehicula scelerisque lectus eu imperdiet. Sed velit diam, lacinia eget felis vitae, ullamcorper condimentum nisi. Mauris pretium imperdiet augue ac venenatis. Integer sit amet ornare nunc. Vestibulum rhoncus tempor ipsum. Mauris
          et ultrices metus. Nam sit amet egestas sem, et hendrerit mi.
        </p>
      </div>
      <!-- /content -->

      <footer>footer</footer>
    </section>

    <section>
      <header>
        <h1>Article trois</h1>
      </header>
      <div class="content">
        <p>
          Suspendisse potenti. In et dignissim sapien, ac porttitor urna. Curabitur finibus dolor at quam suscipit, non ultrices diam interdum. Donec ante magna, interdum ac porttitor ac, pellentesque a nulla.
        </p>
      </div>
      <!-- /content -->

      <footer>footer<br>sur 2 lignes</footer>
    </section>
  </div>
</body>

</html>

Ответ №2:

Вам просто нужно поместить align-items: flex-start; .container туда, где находится display:flex.

Выравнивание элементов по умолчанию растягивается, поэтому оно растягивается до самого низа.

Кроме того, вы можете изучить align-items: flex-end; и align-items: center; .

 .container{
    display:flex;
    margin-left: 10%;
    align-items: flex-start;
}
.content{
    display: flex;
    flex-direction: column;
    
}
p{
    word-wrap: break-word;
    margin:10px;
    
}

section{
    border: 6px solid rgb(231, 198, 106);
    border-radius: 2px;
    max-width: 30%;
    width: auto;
    margin-right: 10px;
}


section>footer{
    background-color: red;
    border-radius: 2px;
    
    padding-bottom: 0px;
    text-align: center;
    color:white;
    
    
}

h1{
    text-align: center;
    margin: 0px;
}
header>h1{
    padding: 15px;
    background-color: orange;
    color:white;
}  
 <!DOCTYPE html>
<html lang="fr">
   <head>
      <!-- Entête  -->
      <meta charset="utf-8"/>
      <title>Mes articles</title>
      <link rel="stylesheet" href="css7.1.css">
   </head>
   <body>
      <!-- contenu -->
      <!-- flex: 1; pour occuper l'espace restant -->

      <h1> Mes articles </h1>
      <div class="container">
            <section>
                <header>
                <h1>Article un </h1>
                </header>
                <div class="content">
                <p>
                Chaque section occupe environ 1/3 de la largeur
                totale <br>Le pied de section s'affiche toujours en bas.
                </p> 
                </div> <!-- /content -->

                <footer>footer</footer>
            </section>

            <section>
                <header>
                <h1>Article deux</h1>
                </header>
                <div class="content" >
                <p>
                    Suspendisse potenti. In et dignissim sapien, ac
                porttitor urna. Curabitur finibus dolor at quam suscipit,
                non ultrices diam interdum. Donec ante magna, interdum ac
                porttitor ac, pellentesque a nulla. Fusce tellus ex,
                congue eget rhoncus ut, porttitor eu tortor. Sed vehicula
                scelerisque lectus eu imperdiet. Sed velit diam, lacinia
                eget felis vitae, ullamcorper condimentum nisi. Mauris
                pretium imperdiet augue ac venenatis. Integer sit amet
                ornare nunc. Vestibulum rhoncus tempor ipsum. Mauris et
                ultrices metus. Nam sit amet egestas sem, et hendrerit
                mi.
                </p> 
                </div> <!-- /content -->

                <footer>footer</footer>
            </section>

            <section>
                <header>
                <h1>Article trois</h1>
                </header>
                <div class="content" >
                <p>
                Suspendisse potenti. In et dignissim sapien, ac
                porttitor urna. Curabitur finibus dolor at quam suscipit,
                non ultrices diam interdum. Donec ante magna, interdum ac
                porttitor ac, pellentesque a nulla.
                </p> 
                </div> <!-- /content -->

                <footer>footer<br>sur 2 lignes</footer>
            </section>
      </div>
   </body>
</html>