CSS - Dinamik içerikli yükseklik üstbilgisini/altbilgisini ayarlayın ... osXsafari/iOSsafari üzerinde çalışmıyor mu? (JsBin)

I have this great solution from @RokoC.Buljan, ancak yalnızca krom & firefox..on safari çalışır içerik bölümü kaydırma değil ve altbilgi o ulaşılmaz render içeriğin altına sopa gibi görünüyor ..CSS - Dinamik içerikli yükseklik üstbilgisini/altbilgisini ayarlayın ... osXsafari/iOSsafari üzerinde çalışmıyor mu? (JsBin)

var mı Safari/iOSsafari için bunu düzeltmenin herhangi bir yolu var mı? ... çapraz tarayıcı uyumlu bir alt çözüm var mı?

http://jsbin.com/negin/9/edit

HTML:

<div id="view"> 
    <div id="appear"> Content that appears </div> 
    <div id="header"> Header </div> 
    <div id="content"> <h1>Content</h1> <p>Lorem ipsum...</p> </div> 
    <div id="footer"> Footer </div> 
</div>

CSS (calc for dynamic seems supported kullanarak, ama belki bu sorun oldu?):

#view { 
    overflow: hidden;   /* NO SCROLLBARS */ 
    margin: 0 auto; 
    background-color: #000; 
    color:#fff; 

    width: 100vw; 
    max-width: 350px; 
    height: 100vh; 
} 
#appear{ 
    display:none; 
} 
#header, 
#footer { 
    height: 44px;    /* note this */ 
    background-color: #555; 
} 
#content { 
    overflow-y: scroll;   /* SCROLLBARS !!!*/ 
    height: calc(100% - 88px); /* 44+44 = 88px */ 
}

jQuery (sabit yüksekliği ayarı başlık ve Altbilgi için Kaydırılabilir içerik için calc (% 100 - 88px) kullanarak ve calc ile yukarıdan aşağıya görünen bölüm görünüme sahip):

senin <head> komut dosyası dahil daha Ok

$("#view").on("click", "#header", function() { 
    var $appear = $('#appear'); 
    var io = this.io ^= 1; // Toggler 

    $appear.show();    // Temporarily show 
    var animH = $appear.height(); // Get height and 
    if(io) $appear.hide();  // fast hide. 
    $appear.slideToggle();  // Now do it with animation 

    $('#content').animate({  // Animate content height 
     height: (io?"-=":"+=")+animH 
    },{ 
     step: function() { 
     $(this).css("overflow-y", "scroll"); 
     }, 
     complete : function(){ 
     var h = 88 + (io?animH:0); // header+footer = 88px 
     $(this).css({height: "calc(100% - "+ h +"px)"}); 
     } 
    }); 
});

kaynak

2014-07-12 StackThis

Mobil Safari, en azından, çok arabası s vardır vh için upport (bkz. [caniuse] (http://caniuse.com/viewport-units)). '# View' eşdeğer bir yükseklik vermek için JavaScript'i kullanmayı denediniz mi? –

@RyanMitchell sorunu çözdüğünüz için teşekkürler! – StackThis

ayrıca "height: 100vh;" kodunu değiştirmeyi de düşünmelidir. – MarmiK

Teşekkür İşte

#View

yüksekliği için ayarlamak için (görüntü alanı yüksekliği) sorunu izole ve vh belirlemek için bazı javascript yazma tavsiye için çalışma var kod, http://j.eremy.net/set-element-height-to-viewport/ çekilen

$(document).ready(function() { 
    function setHeight() { 
    windowHeight = $(window).innerHeight(); 
    $('#view').css('height', windowHeight); 
    } 
    setHeight(); 

    $(window).resize(function() { 
    setHeight(); 
    }); 
});

http://jsbin.com/bivupuqa/1/edit

kaynak

2014-07-23 01:12:50 StackThis