Разделите div на строки по процентам, таким образом, который работает для IE/Edge?

У меня есть страница с плавающей точкой с центральным изображением и двумя боковыми панелями. Каждая из боковых панелей разделена на две строки. Эти ряды имеют свою высоту, определенную как процент от их содержащего столбца ...Разделите div на строки по процентам, таким образом, который работает для IE/Edge?

... кроме Internet Explorer и Edge, где их высота определяется их содержимым.

Моя текущая установка требует, чтобы строки имели тип отображения встроенного стола, который, как я знаю, исторически не поддерживался IE. Предполагается, что IE 11 и Edge поддерживают встроенную таблицу, но они, похоже, не интерпретируют ее так же, как другие браузеры.

Какой подход можно использовать, чтобы браузеры Microsoft дали мне результаты, которые я получаю от всего остального?

<!DOCTYPE HTML> 
<html> 
<head> 
    <style type="text/css"> 
     .wrapper {background-color:#eee;} 

     .column { 
      width:25%; 
      height:100%; 
      display:table-cell; 
      vertical-align:top; 
     } 

     .block_1 {background-color:#aaf;} 

     .block_2 { 
      width:50%; 
      background-color:#afa;    
     } 

     img {width:100%;} 

     .block_3 {background-color:#faa;} 

     .row { 
      width:100%; 
      height:50%; 
      vertical-align:top;  
      display:inline-table; 
     } 
     .a { 
      height:30%; 
      background-color:#ccf;    
     } 
     .b { 
      height:70%; 
      background-color:#aac;    
     } 
     .c {background-color:#fcc;} 
     .d {background-color:#caa;} 
    </style> 
</head> 

<body> 
    <nav class="navbar navbar-main">(navbar goes here)</nav> 
    <div class="wrapper"> 

     <div class="column block_1"> 
      <div class="row a">row a</div> 
      <div class="row b">row b</div>   
     </div> 

     <div class="column block_2"> 
      <img src="images/homepage.jpg" class="img-responsive" alt="Home page image"> 
     </div> 

     <div class="column block_3"> 
      <div class="row c">row c</div> 
      <div class="row d">row d</div>   
     </div> 

    </div> 
</body>

https://jsfiddle.net/fkvnpk0b/2/

источник

2016-12-15 Malkalypse

Могу я предлагаю использовать видовой экран Units здесь?

http://caniuse.com/#feat=viewport-units

vh хорошо поддерживается до IE9; частичная поддержка относится непосредственно к vmin, в частности.

В любом случае, вы хотите изменить высоты .row и .a и .b использовать vh единиц вместо%. Это заполнит высоту окна просмотра при загрузке страницы.

https://jsfiddle.net/m4tuna/z6co93wa/

Конечно, это немного отличается от текущего, например, в том, что вы просто заполняющей родительскую высоту в процентах. Если вы ищете его для заполнения любого внешнего контейнера в процентах, в частности, вам нужно назначить высоту или минимальную высоту для контейнера, чтобы строки знали, что нужно заполнить.

источник

2016-12-15 03:11:41 mikefortuna

Можно ли изменить приведенный вами пример так, чтобы левый и правый столбцы соответствовали высоте изображения? – Malkalypse

Не может. Альтернативой было бы установить изображение в центре как фоновое изображение в CSS. – mikefortuna

Тогда, к сожалению, это не сработает для моих нужд. Спасибо хоть! – Malkalypse

Разделите div на строки по процентам, таким образом, который работает для IE/Edge?

ответ

Смежные вопросы