1

Tengo dificultad para ajustar el contenido dentro de una etiqueta <figure> que debe tener una altura fija en este caso de 250px. El problema es que dentro de esta figura tengo un div y párrafo. Lo que quisiera es que por mas <br> que agregue no sobrepase la altura de la figura.

introducir la descripción de la imagen aquí

Si intento poner la altura en "auto" ya no respetaría la altura fija de 250px.

Tengo la demo reproduciendo el problema: DemoStackBlitz

.container {
  margin: auto;
  width: 300px;
  position: relative;
  padding-top: 80px;
}

.content figure {
  width: 100%;
  height: 250px;
  border: 1px solid #3b444b;
}
.item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  z-index: -1;
}
.item h2 {
  font-size: 2rem;
  color: white;
  margin-bottom: 10px;
}
.item p {
  color: white;
  text-align: left;
}
.item {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 10px;
  margin: 5%;
  position: relative;
}
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>

  <body>
    <div class="container">
      <div class="content">
        <figure>
          <div class="item">
            <h2>Demo</h2>
            <p>
              <br /><br />
              <br /><br />
              <br /><br />
            </p>
          </div>
        </figure>
      </div>
    </div>
  </body>
</html>

Quisiera que quedara de esta manera sin importar cuantos <br> se agregue:

introducir la descripción de la imagen aquí

1 respuesta 1

1

Agregándole simplemente un height: 65%; al class .item, se ve como estabas buscando:

.container {
  margin: auto;
  width: 300px;
  position: relative;
  padding-top: 80px;
}

.content figure {
  width: 100%;
  height: 250px;
  border: 1px solid #3b444b;
}
.item::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: linear-gradient(60deg, #29323c 0%, #485563 100%);
  z-index: -1;
}
.item h2 {
  font-size: 2rem;
  color: white;
  margin-bottom: 10px;
}
.item p {
  color: white;
  text-align: left;
}
.item {
  display: flex;
  flex-direction: column;
  padding: 30px;
  border-radius: 10px;
  margin: 5%;
  position: relative;
  height: 65%; 
}
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>

  <body>
    <div class="container">
      <div class="content">
        <figure>
          <div class="item">
            <h2>Demo</h2>
            <p>
              <br /><br />
              <br /><br />
              <br /><br />
            </p>
          </div>
        </figure>
      </div>
    </div>
  </body>
</html>

Al definir el height fijo de un div evitas que este se defina automáticamente en base a su contenido, en este caso los br.

Eso se va a respetar aunque su contenido intente exceder su altura definida.

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.