最小高度柔性盒容器

我想將容器內的內容水平居中。我使用了最小高度爲&的flexbox，但在Internet Explorer中，此解決方案不起作用。 我不能用簡單的高度，因爲：最小高度柔性盒容器

佈局響應
內容可以有不同的長度

在這種情況下，這裏的內容會更長該容器中，佈局將休息（使用時的高度 - 所以我必須用最小高度...）

我準備一個小的演示與「黑客」爲IE： http://jsfiddle.net/pujceaam

HTML

<div id="content" class="flex-center"> 
<div id="content2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam fugit eum modi aspernatur dicta, similique. Cupiditate sapiente at facilis tempore assumenda, eaque inventore veritatis aperiam et tenetur aliquam totam quo sequi dolor illo est amet quibusdam repellat, sed eius voluptate, a repudiandae molestiae asperiores! Alias omnis aperiam nam perferendis maiores quae minus repellat similique repellendus dolor quos magnam, labore architecto quasi vitae cumque officiis adipisci exercitationem autem eius fugiat. Velit nesciunt, excepturi neque. Perspiciatis delectus, autem rerum soluta esse, nulla necessitatibus repellat ducimus ex eligendi culpa! Iusto, repellat hic aliquam sit illum tempore, adipisci modi? At doloribus, illum quod perferendis ab dolorum aut, itaque laborum, voluptates nihil ea. Quia molestias tempore repudiandae pariatur laudantium ut velit inventore, consectetur distinctio officia deserunt laborum natus sunt voluptates alias corrupti veniam tempora exercitationem, fugiat aliquam provident soluta. Provident repellat odit totam aliquam culpa distinctio voluptas expedita ipsa deleniti quasi nesciunt qui eius esse iste debitis vitae ad soluta dolorem, amet, optio aperiam ullam. Dolorem ab dolores veniam, dolore, asperiores adipisci enim maiores quas accusantium porro consectetur sapiente officia exercitationem doloremque neque aperiam hic impedit nihil inventore alias ullam voluptatem soluta earum quisquam. Obcaecati, sapiente, at. Obcaecati eius ex, delectus! Atque, ullam et vitae.</div>

CSS

.flex-center { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    align-items: center; 
    background: rgba(125, 125, 125, .5); 
    min-height: calc(100vh - 100px); 
} 
.va-parent { 
    width: 100%; 
    display: table; 
} 
.va-children { 
    display: table-cell; 
    vertical-align: middle; 
}

$(function() { 

    //detect IE 
    var isIE = (window.navigator.msPointerEnabled) || (document.all && document.addEventListener && !window.atob); 

    //old method to vertical align content 
    function flexible() { 
     var c1 = $('#content'), 
      c2 = $('#content2'); 

     if (c1.height() > c2.height()) { 
      c1.addClass('va-parent'); 
      c2.addClass('va-children'); 
     } 
    } 

    //apply old method if IE 
    if (isIE) flexible(); 

});

但我不知道這是否是一個好解？
或者，也許有人有另一個想法？

編輯：在內容可以是網格，圖像，表格，清單等內容 - 不僅是文字:)

來源

2015-04-01 PixelT

截斷字符串省略號

.truncate { 
    width: 250px; 
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis; 
}

來源

2015-04-01 08:09:53

最小高度柔性盒容器

回答

相關問題