Skip to main content
se eliminaron 1102 caracteres en el cuerpo
Origen Enlace
Yussef
  • 23.4k
  • 4
  • 12
  • 29

Estimados programadores,

Espero que se encuentren bien. Mi nombre es Adrian y estoy enfrentando un problema de codificación en un proyecto que estoy trabajando. Estoy seguro de que entre todos ustedes hay alguien que puede ayudarme a resolverlo.

Me encantaría pedirles su ayuda y sabiduría en este asunto. Si es posible, les agradecería si pueden revisar mi código y darme su opinión sobre cómo resolver el problema. Estoy seguro de que juntos podemos encontrar una solución efectiva.

Agradezco de antemano su tiempo y ayuda. Si necesitan más información o detalles sobre mi problema, estaré encantado de proporcionarlos.

Les agradezco de nuevo por su tiempo y espero su respuesta pronto.

Atentamente, Adrian

Problema:

<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
    <title>APP</title>
    <style>
        html {
            width: 100%;
            min-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-behavior: smooth;
            font-size: var(--text-small);
        }
        body {
            width: 100%;
            height: 100%;
            background: var(--color-second);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .contenedor {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--color-second);
            padding: var(--margin-medium);
        }
        .boxNav {
            width: 100%;
            max-width: 1000px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background-color: whitesmoke;
            padding: var(--margin-medium);
            border-radius: var(--border-radius-medium);
            font-size: var(--text-small);
        }
        .boxNavLeft {
            width: 500px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .boxlistUl {
            margin-left: var(--margin-medium);
        }
        .boxNavRight {
            width: 450px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="contenedor">
        <div class="boxNav">
            <div class="boxNavLeft">
                <div class="boxList">
                    <ul class="boxlistUl">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>e</li>
                        <li>f</li>
                        <li>g</li>
                        <li>h</li>
                        <li>i</li>
                        <li>j</li>
                        <li>k</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                    </ul>
                </div>
            </div>
            <div class="boxNavRight">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
                    magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
                    adipisci quo quia qui quos? Id, laborum!
                </p>
            </div>
        </div>
    </div>
</body>

</html>

html {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-behavior: smooth;
  font-size: var(--text-small);
}
body {
  width: 100%;
  height: 100%;
  background: var(--color-second);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contenedor {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-second);
  padding: var(--margin-medium);
}
.boxNav {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: whitesmoke;
  padding: var(--margin-medium);
  border-radius: var(--border-radius-medium);
  font-size: var(--text-small);
}
.boxNavLeft {
  width: 500px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.boxlistUl {
  margin-left: var(--margin-medium);
}
.boxNavRight {
  width: 450px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aliceblue;
}
<div class="contenedor">
  <div class="boxNav">
      <div class="boxNavLeft">
          <div class="boxList">
              <ul class="boxlistUl">
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  <li>d</li>
                  <li>e</li>
                  <li>f</li>
                  <li>g</li>
                  <li>h</li>
                  <li>i</li>
                  <li>j</li>
                  <li>k</li>
                  <li>l</li>
                  <li>m</li>
                  <li>n</li>
              </ul>
          </div>
      </div>
      <div class="boxNavRight">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
              magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
              adipisci quo quia qui quos? Id, laborum!
          </p>
      </div>
  </div>
</div>

Estimados programadores,

Espero que se encuentren bien. Mi nombre es Adrian y estoy enfrentando un problema de codificación en un proyecto que estoy trabajando. Estoy seguro de que entre todos ustedes hay alguien que puede ayudarme a resolverlo.

Me encantaría pedirles su ayuda y sabiduría en este asunto. Si es posible, les agradecería si pueden revisar mi código y darme su opinión sobre cómo resolver el problema. Estoy seguro de que juntos podemos encontrar una solución efectiva.

Agradezco de antemano su tiempo y ayuda. Si necesitan más información o detalles sobre mi problema, estaré encantado de proporcionarlos.

Les agradezco de nuevo por su tiempo y espero su respuesta pronto.

Atentamente, Adrian

Problema:

<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
    <title>APP</title>
    <style>
        html {
            width: 100%;
            min-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-behavior: smooth;
            font-size: var(--text-small);
        }
        body {
            width: 100%;
            height: 100%;
            background: var(--color-second);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .contenedor {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--color-second);
            padding: var(--margin-medium);
        }
        .boxNav {
            width: 100%;
            max-width: 1000px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background-color: whitesmoke;
            padding: var(--margin-medium);
            border-radius: var(--border-radius-medium);
            font-size: var(--text-small);
        }
        .boxNavLeft {
            width: 500px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .boxlistUl {
            margin-left: var(--margin-medium);
        }
        .boxNavRight {
            width: 450px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="contenedor">
        <div class="boxNav">
            <div class="boxNavLeft">
                <div class="boxList">
                    <ul class="boxlistUl">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>e</li>
                        <li>f</li>
                        <li>g</li>
                        <li>h</li>
                        <li>i</li>
                        <li>j</li>
                        <li>k</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                    </ul>
                </div>
            </div>
            <div class="boxNavRight">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
                    magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
                    adipisci quo quia qui quos? Id, laborum!
                </p>
            </div>
        </div>
    </div>
</body>

</html>

Problema:

html {
  width: 100%;
  min-height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-behavior: smooth;
  font-size: var(--text-small);
}
body {
  width: 100%;
  height: 100%;
  background: var(--color-second);
  display: flex;
  justify-content: center;
  align-items: center;
}
.contenedor {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--color-second);
  padding: var(--margin-medium);
}
.boxNav {
  width: 100%;
  max-width: 1000px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  background-color: whitesmoke;
  padding: var(--margin-medium);
  border-radius: var(--border-radius-medium);
  font-size: var(--text-small);
}
.boxNavLeft {
  width: 500px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.boxlistUl {
  margin-left: var(--margin-medium);
}
.boxNavRight {
  width: 450px;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  background-color: aliceblue;
}
<div class="contenedor">
  <div class="boxNav">
      <div class="boxNavLeft">
          <div class="boxList">
              <ul class="boxlistUl">
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  <li>d</li>
                  <li>e</li>
                  <li>f</li>
                  <li>g</li>
                  <li>h</li>
                  <li>i</li>
                  <li>j</li>
                  <li>k</li>
                  <li>l</li>
                  <li>m</li>
                  <li>n</li>
              </ul>
          </div>
      </div>
      <div class="boxNavRight">
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
              magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
              adipisci quo quia qui quos? Id, laborum!
          </p>
      </div>
  </div>
</div>

Origen Enlace

¿Como hacer que un div ocupe todo el alto de un div contenedor?

Estimados programadores,

Espero que se encuentren bien. Mi nombre es Adrian y estoy enfrentando un problema de codificación en un proyecto que estoy trabajando. Estoy seguro de que entre todos ustedes hay alguien que puede ayudarme a resolverlo.

Me encantaría pedirles su ayuda y sabiduría en este asunto. Si es posible, les agradecería si pueden revisar mi código y darme su opinión sobre cómo resolver el problema. Estoy seguro de que juntos podemos encontrar una solución efectiva.

Agradezco de antemano su tiempo y ayuda. Si necesitan más información o detalles sobre mi problema, estaré encantado de proporcionarlos.

Les agradezco de nuevo por su tiempo y espero su respuesta pronto.

Atentamente, Adrian

Problema:

El div llamado "boxNavRight" no ocupa el alto total, me gustaría que ocupe todo el espacio del div "boxNav".

no he logrado conseguir esto, cuando asigno una altura definida a "boxNav" ejemplo 500px funciona pero no debe tener una altura definida, ya que cuando la pantalla es pequeña al tener la propiedad flex-wrap envía al div "boxNavRight" hacia abajo y si tiene una altura definida el contener padre este se desborda..

<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
    <title>APP</title>
    <style>
        html {
            width: 100%;
            min-height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            scroll-behavior: smooth;
            font-size: var(--text-small);
        }
        body {
            width: 100%;
            height: 100%;
            background: var(--color-second);
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .contenedor {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: var(--color-second);
            padding: var(--margin-medium);
        }
        .boxNav {
            width: 100%;
            max-width: 1000px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: wrap;
            background-color: whitesmoke;
            padding: var(--margin-medium);
            border-radius: var(--border-radius-medium);
            font-size: var(--text-small);
        }
        .boxNavLeft {
            width: 500px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
        }
        .boxlistUl {
            margin-left: var(--margin-medium);
        }
        .boxNavRight {
            width: 450px;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            background-color: aliceblue;
        }
    </style>
</head>

<body>
    <div class="contenedor">
        <div class="boxNav">
            <div class="boxNavLeft">
                <div class="boxList">
                    <ul class="boxlistUl">
                        <li>a</li>
                        <li>b</li>
                        <li>c</li>
                        <li>d</li>
                        <li>e</li>
                        <li>f</li>
                        <li>g</li>
                        <li>h</li>
                        <li>i</li>
                        <li>j</li>
                        <li>k</li>
                        <li>l</li>
                        <li>m</li>
                        <li>n</li>
                    </ul>
                </div>
            </div>
            <div class="boxNavRight">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur deleniti nam libero
                    magni amet esse praesentium officiis excepturi quis repellat? Blanditiis quas incidunt
                    adipisci quo quia qui quos? Id, laborum!
                </p>
            </div>
        </div>
    </div>
</body>

</html>