doctype html a rozmiar diva

pytanie zadane 16 listopada 2019 w HTML i CSS przez patrick167 Początkujący (260 p.)
zamknięte 2 kwietnia 2020 przez patrick167

Witam, gdy dodaję <!doctype html> divy które mają atrybut "background: url(...)" tracą możliwość ustawiania im wysokości w procentach. Czy da się obejść to bez ustawiania wartości vh? Dodam, że width można ustawiać w sposób procentowy.

Pozdrawiam

<!doctype html>
<html>
   <style>
      
       .hero{
           background:url(https://uploads-ssl.webflow.com/5c7da11f03dd897c90e6ef71/5c7da11f03dd896b1fe6f071_pink-flowers-700x371.jpg);
           height:100vh;
           width:100%;
       }
    
    </style>
    <body>
        <div class="hero">
            
        </div>
    </body>
    
</html>

komentarz zamknięcia: Dostałem odpowiedź na pytanie

3 odpowiedzi

odpowiedź 17 listopada 2019 przez pseudoExpert Obywatel (1,300 p.)

Trudno jest udzielić odpowiedzi na Twoje pytanie, ponieważ nie jest jasna Twoja intencja. Gdy w <div class="hero"> umieścisz treść, rozepchnie ona wysokość diva wg potrzeby. Jeśli jednak koniecznie chcesz, aby ten miał 'height:100%;' to pytanie jest - 100% czego? Obecnie rodzicem dla <div class="hero"> jest element <body>, więc jeśli rodzicowi nadasz wysokość, to <div class="hero"> przyjmie 100% wysokości rodzica. Dopisz do stylów (jako przykład) 'body {height:50vh;}'. To zadziała, ale czy o to chodzi?

<!doctype html>
<html>
<head>
   <style>
       body {height:50vh;}
       .hero{
           background:url(https://uploads-ssl.webflow.com/5c7da11f03dd897c90e6ef71/5c7da11f03dd896b1fe6f071_pink-flowers-700x371.jpg);
           height:100vh;
           height:100%;
           width:100%;
       }
     
    </style>
</head>
    <body>
        <div class="hero">
        
        </div>
    </body>
     
</html>

odpowiedź 17 listopada 2019 przez Comandeer Guru (600,810 p.)

To, na co się nadziałeś, to tryb quirks, który wprowadza wiele zmian niezgodnych ze standardami, w tym inny sposób liczenia wysokości. W trybie standardów wysokość w procentach działa tylko, jeśli rodzic danego elementu ma określoną wysokość. Rozwiązaniem byłoby zatem ustawienie wysokości w procentach wszystkim elementom wzwyż Twojego, do html łącznie – co można zastąpić po prostu nadaniem elementowi wysokości w vh. Obawiam się, że to najmniej inwazyjna metoda.