Względne dopełnienie i jednostki vh - błąd lub spekulacje?

Question

DEMO

Czasami tworzę kwadrat (lub dowolny prostokąt, naprawdę), że będą respektować jego stosunek w dowolnym rozmiarze stosując metodę podobną do this method.

Czego chcę:

• aby zapobiec plac rozciągający się poza rzutni na urządzeniach z małą wysokość czyli telefon komórkowy w krajobrazie

Proponowane rozwiązanie

• szerokość ograniczenia kwadratu do pe rcentage wysokości rzutni przy użyciu współczynnika max-width: 90vh
• oczekiwać, aby być przestrzegane

CSS

.square { 
     position: relative; 
     height: 0; 
     padding-bottom: 100%; 
     overflow: hidden; 
    } 

    .square-inner { 
     position: absolute; 
     top: 0; 
     bottom: 0; 
     left: 0; 
     right: 0; 
    } 

    .mw { max-width: 90vh;} /* solution, but makes things break */ 

HTML

<div class="square mw"> 
     <div class="square-inner"></div> 
    </div> 

Co powinno się zdarzyć

• w rzutniach z małych wysokościach, na placu powinna być max szerokość 90% wysokości rzutni

Co właściwie się dzieje:

• gdy rzutnia wysokość jest mniej niż szerokość kwadratu:
  • szerokość jest ograniczona zgodnie z vh Wartość
  • wysokość obliczana jest od szerokości placu gdyby nie zostały ograniczone do vh
  • otrzymujemy pionowo długi prostokąt

The spec mówi, że względna wartość obliczana jest z " zawierający blok ", co wydaje mi się, że powinna to być obecna szerokość kontenera.

Przeglądarka zachowanie:

• Chrome 29.0.1547.65: jak opisano
• Firefoksa 23.01: jak opisano
• Opera: nie przestrzega VH wcale Nie zatwierdzono z Opera 16+

jestem interpretacji spec nieprawidłowo, lub jest to możliwe błąd w realizacji przez producentów przeglądarek?

Answer 1

Problem polega na użyciu obu długości w% i vh.

Spróbuj tego:

Working Example

* { 
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    box-sizing: border-box; 
    font-family: sans-serif; 
    font-weight: 100; 
} 

.neat { 
    width: 50%; 
    max-width: 600px; 
    min-width: 320px; 
    margin: 0 auto; 
} 

.col { 
    float: left; 
    padding: 2rem; 
    width: 90vh; /*** Important bit changed width:50%; to width:90vh; ***/ 
    max-width: 50%; /*** Important bit added max-width:50%; ***/ 
} 

.square { 
    position: relative; 
    height: 0; 
    padding-bottom: 100%; 
    overflow: hidden; 
} 

.square-inner { 
    position: absolute; 
    background-color: #333333; 
    color: white; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    padding: 1.5rem; 
} 

.mw { 
    max-width: 90vh; 
} 

Answer 2

Nie sądzę, że Opera obsługuje vh, a są znane problemy. Zastanawiam się, czy ten błąd wpływa na to, co widzisz: http://code.google.com/p/chromium/issues/detail?id=124331.