1

introducir la descripción de la imagen aquí

Supongamos, que tenemos estos dos div, el de la izquierda (altura automática, que variará dependiendo de que tanto ampliemos el navegador) Y el de la derecha, cuya altura es estática por poner un ejemplo height= 700px, pues a la hora de ampliar o alejar, se mantendrán los 700px, y se descompensará respecto al div de la izquierda. Pues, hay alguna forma de hacer que la altura del div derecho = div izquierdo que es además automático, un saludo y muchas gracias.

introducir la descripción de la imagen aquí

esta segunda imagen demuestra eso, que al no estar la página ampliada en un 100% pues ocurre el desbalance.

EDIT2: ====CSS====

#contenedor_centroizquierda {

margin-top:25px;
width: 45%;

height: auto;
background-color: snow;
float: left;

border-top:         2px solid black;
border-bottom:      2px solid black;
border-left:        2px solid black;
border-right:       2px solid black;

}

`#contenedor_centroderecha {

float: right;
background-color: SlateGray;
font-family: Helvetica;
line-height: 20px;
margin-top:25px;

width: 45%;
height: 1400px;

background-color: SlateGray;

border-top:         2px solid black;
border-bottom:      2px solid black;
border-left:        2px solid black;
border-right:       2px solid black;

}`

====CSS====

2
  • 1
    Muestra un ejemplo mínimo verificable del código que tienes hasta el momento, así será más sencillo ayudarte.
    – padaleiana
    el 27 may. 2021 a las 21:00
  • listo, ya he editado, si necesitas más código vuelvo a editar y añado más, pero veo un tanto redundante añadir más código, no aporta nada
    – Ilian
    el 27 may. 2021 a las 21:06

2 respuestas 2

1

aqui te dejo una posible solucion:

      html,
      body {
        height: 100%;
        font-family: sans-serif;
      }
      .contenedor{
        display: flex;
        justify-content: space-evenly;
        margin: 50px;
      }
      .caja{
        background: yellowgreen;
        width: 40%;
        padding: 20px;
      }
<div class="contenedor">
    <div class="caja">Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse saepe quam ea iure ipsa, adipisci, est odit numquam aut ratione minima dolores, nemo consequuntur? Delectus nulla accusamus molestias tenetur unde.
    Tenetur consectetur cupiditate accusamus facere totam cum necessitatibus doloremque officia alias voluptatem? Accusamus facilis nesciunt pariatur vel sint, debitis sed labore laborum doloribus corrupti consequuntur quos cupiditate qui mollitia velit?
    Iusto ut illum totam voluptas veritatis atque? Vero laborum rem quam explicabo dignissimos error? Facere quidem quae aliquid, quos laboriosam, laborum unde provident, aspernatur quam quas quo consequuntur ipsum vero?
    Eaque exercitationem dolorem corporis omnis harum modi quasi, esse dicta incidunt. Consequatur possimus deserunt quia fuga, cum voluptate aut blanditiis. Qui, culpa provident ipsa excepturi commodi a aut rerum nam?
    Explicabo ipsa, ut, vel necessitatibus rem minima expedita ullam placeat autem eius dicta blanditiis debitis sint voluptatibus error, perspiciatis iure. Est doloremque, tempore maxime provident nulla recusandae tempora saepe earum!</div>
    <div class="caja">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt corrupti, aliquam officiis debitis incidunt, quaerat labore repellendus earum error tempora eum perspiciatis. Tempore rerum consectetur tenetur dolorem, delectus laboriosam fugit.</div>
  </div>

con el display flex lo que logras es que si no especificas un tipo de alineacion vertical por defecto sera strecht, con lo cual las dos cajas seran de la altura de la que mas contenido tenga. Espero te sirva

2
  • Vale, esta es la respuesta que esperaba y buscaba, desconocía por completo el flex. Bueno muchas gracias, no se como, pero has adivinado tú solo como estaba hecha mi página, un contenedor principal y dentro varios divs, además has usado sólo css. Mis bendiciones, muchas gracias. Edit: Soy nuevo, no sé quien ha sido el que ha respondido si Sal o Hernán Garcia, pero gracias a los dos. Edit2: Si el div que hay que alargar posee una altura height= X pues hay que eliminarla
    – Ilian
    el 28 may. 2021 a las 9:39
  • me alegro te haya servido. Por cierto flexbox y css grid son los pilares de la maquetacion web, tienes 2 muy buenos cursos en el canal de YT de JONMIRCHA el 28 may. 2021 a las 13:27
1

Te dejo una solución puede que te sirva, no depende del ampliar la altura del navegador sino del contenido del elemento de la izquierda o derecha, se igualan en altura el uno con el otro

setInterval(
() => { 
  var leftElement = document.getElementById('left');
  leftElement.innerHTML += 'CONTENIDO\n'
}
,2000)
.parent {
  display: flex;
  border: 1px solid black;
}
.left, .right {
  height: inherit;
  width: 50%;
}

.left {
  white-space: pre;
}

.right {
  background: red;
}
<div class="parent">
  <div id="left" class="left"></div>
  <div class="right"></div>
</div>

1
  • muchas gracias por la aportación, el usuario de arriba dió en el blanco, pero gracias igualmente!!!
    – Ilian
    el 28 may. 2021 a las 9:41

Tu Respuesta

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

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