Колонны с высотой самой высокой, совместимой с Internet Explorer 9?

Мне нужно, чтобы решение (если он существует), было совместимо с IE 9 +, а следовательно он не может использовать flexbox.

Я находился проблема, сделав совместимым с IE 9.

Проблема состоит в том, что в IE 9 он является совсем не совместимым с flexbox а следовательно я нуждаюсь в том, чтобы знать, существует ли альтернатива, чтобы делать то, что возможно видеть в snippet.

Результат, поскольку видели бы в IE 9, - это как снимание свойства display:flex; контейнера .container.

Объяснение:

  1. Контейнер main, с 2 контейнерами дети.
  2. Контейнер main: Он должен занимать 100 % и иметь высоту, в которой нуждаются дети (автомобиль).
  3. Контейнер сын (изображение): Первый контейнер - div он опустошил с background изображения. Он должен занимать (100 % - и %) ширины страницы и высоты это должен быть 100 % отца.
  4. Контейнер сын (контент): Второй контейнер для контента, должен занимать и % ширины и высоты, в которой он нуждается. (Этот контейнер - тот, который был бы должен разграничивать высоту остальных)

.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;
}

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.

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.

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.

Я протестировал несколько различных свойств, чтобы симулировать стиль "flexbox", но не получая того, что я хочу.

  • display: table|block|table-cell|inline-block;
  • display: inline-block; height: 100%; (В сыне основываясь в путеводитель, который я присоединяю)

Flexbox, не используя flexbox

То, в чем я нуждаюсь, что-то похожее на это Equal height columns, с различием, что мне нужно, чтобы background контейнера левой стороны был background-image width 25 %. Если он делается как в этом путеводителе, изображение расширилось бы, так как, хотя он будет одиноким 25 % видимых занимают 100 %.

В высоких размерах экрана потеряй качество и видели бы плохо:

.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%;
}

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.

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.

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.

5
задан 08.07.2019, 16:02
0 ответов