سفاري:وحدات VH المطبقة على العنصر الأصلي لا تسمح بارتفاع 100٪ في الطفل؟

Question

لدي موقف بسيط للغاية، حيث أريد تعيين عنصر الحاوية عليه 80vh ثم اجعل div الداخلي 100% من هذا الارتفاع.سيتم عرض هذا بشكل صحيح في Chrome، ولكن في Safari، لا يحتوي العنصر الداخلي على 100% من 80vh ارتفاع.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
}

.inner {
    height: 100%;
    background-color: blue;
}

هنا كمان يوضح هذه المشكلة: http://jsfiddle.net/neilff/24hZQ/

في Chrome يكون العنصر باللون الأزرق، وفي Safari يكون باللون الأحمر.هل هناك حل لهذه المشكلة دون التقديم 80vh إلى ارتفاع .inner شعبة؟

Answer 1

وهذا خطأ معروف في vh و vw في سفاري.يمكنك إصلاحه عن طريق الإعداد height: inherit على العنصر الداخلي:

.inner {
    height: inherit;
}

http://jsfiddle.net/24hZQ/47/

Answer 2

يمكنك تحقيق ذلك باستخدام flexbox (تم اختباره في Safari 7.0.6 وiOS 7 وiOS 8.0 Simulator) -

http://jsfiddle.net/clintioo/zkmnomab/

.container {
    background-color: red;
    width: 100%;
    height: 80vh;  
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
}

.inner {
    -ms-flex: 1;
    -webkit-flex: 1;
    -webkit-box-flex: 1.0;
    flex: 1;
    background-color: blue;
}

Answer 3

سوف تحتاج إلى تعيين position: absolute; إلى .inner عنصر.

.container {
    background-color: red;
    width: 100%;
    height: 80vh;
    position: relative;
}

.inner {
    height: 100%;
    background-color: blue;
    position: absolute;
    width: 100%;
}