5

Necesito que la solución (si existe), sea compatible con IE 9+, por lo que no puede usar flexbox.

Me he encontrado un problema al compatibilizar con IE 9.

El problema es que en IE 9 no es nada compatible con flexbox por lo que necesito saber si existe una alternativa para hacer lo que se puede ver en el snippet.

El resultado de como se vería en IE 9 es como quitar la propiedad display:flex; del contenedor .container.

Explicación:

  1. Un contenedor main, con 2 contenedores hijos.
  2. Contenedor main: Tiene que ocupar el 100% y tener la altura que necesiten los hijos (auto).
  3. Contenedor hijo (imagen): El primer contenedor es un div vació con un background de una imagen. Tiene que ocupar el (100% - y%) de ancho de la página y la altura tiene que ser el 100% del padre.
  4. Contenedor hijo (contenido): El segundo contenedor para el contenido, tiene que ocupar y% de ancho y la altura que necesite. (Este contenedor es el que debería delimitar la altura de los demás)

.container {
  width: 100%;
  outline: 1px solid red;
  display: flex; /*Comentar para simular IE ya que no es compatible */
}

.imgCol {
  position: relative;
  overflow: hidden;
  width: 25%;
  height: auto;
  float: left;
  background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
  background-position: bottom;
  background-size: cover;
  outline: 1px solid green;
  min-height: 1px;
}

.content {
  width: 75%;
  float: left;
  outline: 1px solid blue;
}
<div class="container">
  <div class="imgCol">
  <!-- Background image-->
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>

  <p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>

  <p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
  </div>
</div>

He probado varias propiedades diferentes para simular el estilo de "flexbox" pero sin conseguir lo que quiero.

  • display: table|block|table-cell|inline-block;
  • display: inline-block; height: 100%; (En el hijo basandome a la guia que adjunto)

Flexbox sin usar flexbox

Lo que necesito es algo parecido a esto Equal height columns, con la diferencia que yo necesito que el background del contenedor de la izquierda sea un background-image de width 25%. Si se hace como en esta guía, la imagen se ensancharía ya que aunque sea solo 25% visible esta ocupando el 100%.

En dimensiones de pantalla altas pierde la calidad y se vería mal:

.container2 {
  float: left;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.container {
  width: 100%;
  position: relative;
  float: left;
  outline: 1px solid red;
  right: 75%;
  background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
  background-position: bottom;
  background-size: cover;
}

.imgCol {
  position: relative;
  width: 25%;
  float: left;
  outline: 1px solid green;
  min-height: 1px;
  overflow: hidden;
  left: 75%;
}

.content {
  width: 75%;
  float: left;
  outline: 1px solid blue;
  position: relative;
  overflow: hidden;
  left: 75%;
}
<div class="container2">
  <div class="container">
    <div class="imgCol">
    </div>
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>

    <p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>

    <p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
    </div>
  </div>
</div>

1 respuesta 1

4

Poniendo al padre un display: table, a las columnas hijas un display: table-cell y quitándoles a las columnas hijas el float:left debería valerte.

.container {
  width: 100%;
  outline: 1px solid red;
  display: table;
}

.imgCol {
  display: table-cell;
  position: relative;
  overflow: hidden;
  width: 25%;
  background-image: url(https://cdn-scor-prd-01.azureedge.net/cefinvestorcenter/-/media/aam-web/images/cefcenter/400x800-cef-insights.ashx?h=800&la=en-US&w=400&hash=E1BAC22A62EC20C8288886AE154489715A03DD3C&modified=20181127174522);
  background-position: bottom;
  background-size: cover;
  outline: 1px solid green;
  min-height: 1px;
}

.content {
  width: 75%;
  outline: 1px solid blue;
  display: table-cell;
}
<div class="container">
  <div class="imgCol">
  <!-- Background image-->
  </div>
  <div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Volutpat lacus laoreet non curabitur. Viverra mauris in aliquam sem. Venenatis a condimentum vitae sapien pellentesque. In massa tempor nec feugiat nisl pretium fusce. Tellus molestie nunc non blandit massa enim nec. Amet luctus venenatis lectus magna fringilla urna porttitor rhoncus dolor. Tempor id eu nisl nunc mi ipsum faucibus vitae. Morbi blandit cursus risus at ultrices mi tempus imperdiet. Sit amet aliquam id diam maecenas ultricies mi eget. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque. Et magnis dis parturient montes. Tristique magna sit amet purus. Quam viverra orci sagittis eu. Eget velit aliquet sagittis id consectetur. Ornare arcu dui vivamus arcu felis bibendum ut tristique. Pulvinar sapien et ligula ullamcorper malesuada proin. Sed cras ornare arcu dui vivamus arcu.</p>

  <p>Mattis ullamcorper velit sed ullamcorper morbi tincidunt ornare massa. Feugiat pretium nibh ipsum consequat nisl. Quam vulputate dignissim suspendisse in est ante in nibh. Sed pulvinar proin gravida hendrerit. Quisque sagittis purus sit amet volutpat consequat mauris. Eget sit amet tellus cras adipiscing enim. Purus in mollis nunc sed id semper. Sit amet purus gravida quis blandit turpis. Rhoncus urna neque viverra justo nec ultrices dui sapien. Faucibus et molestie ac feugiat. Nunc aliquet bibendum enim facilisis gravida neque. Donec massa sapien faucibus et molestie ac feugiat sed. Et tortor at risus viverra adipiscing at. Urna nunc id cursus metus aliquam eleifend mi in. Nec ullamcorper sit amet risus nullam eget felis. Ridiculus mus mauris vitae ultricies leo integer malesuada nunc. Elementum facilisis leo vel fringilla est ullamcorper eget nulla.</p>

  <p>Blandit libero volutpat sed cras ornare. Cum sociis natoque penatibus et magnis dis parturient montes nascetur. Ut sem nulla pharetra diam sit amet nisl suscipit adipiscing. Proin fermentum leo vel orci porta non pulvinar. Donec enim diam vulputate ut. Etiam sit amet nisl purus in mollis nunc sed id. Quam viverra orci sagittis eu volutpat odio facilisis mauris. Risus feugiat in ante metus dictum at tempor commodo. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Pulvinar pellentesque habitant morbi tristique senectus et netus et malesuada. Ut enim blandit volutpat maecenas volutpat blandit aliquam etiam. Ut diam quam nulla porttitor massa id neque. Imperdiet nulla malesuada pellentesque elit eget gravida. Convallis a cras semper auctor. Posuere sollicitudin aliquam ultrices sagittis orci a. Ullamcorper velit sed ullamcorper morbi tincidunt ornare massa eget. Nisi quis eleifend quam adipiscing vitae proin sagittis nisl. Laoreet suspendisse interdum consectetur libero id faucibus.</p>
  </div>
</div>

El uso de la regla display: table por defecto va a tratar que el elemento luzca similar a una tabla, lo que incluye entre otras cosas que los elementos con display: table-cell de su interior tengan la misma altura (todas las columnas adaptadas a la altura de la más alta). Pero esto entraba en conflicto con el float: left que tenías definido para las columnas, ya que ambas reglas tratan de colocar a los elementos a su propia manera.

El uso de display: table está soportado por Internet Exlorer desde la versión 8.0 por lo que esta solución debería ser compatible con tu requerimiento.

1
  • Efectivamente, era el float.... Muchas gracias! :)
    – x3k
    Commented el 9 jul. 2019 a las 6:28

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.