• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

question-closed doctype html a rozmiar diva

Object Storage Arubacloud
0 głosów
262 wizyt
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

+1 głos
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>

 

+1 głos
odpowiedź 17 listopada 2019 przez Comandeer Guru (602,380 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.

0 głosów
odpowiedź 16 listopada 2019 przez xFanti Obywatel (1,350 p.)
Możesz ten obrazek wstawić do diva jako img i ustawić odpowiednie wielkości samego diva
komentarz 16 listopada 2019 przez patrick167 Początkujący (260 p.)
Dzięki za odpowiedź, a czy nie ma jakiejś mniej inwazyjnej metody żeby nie przepisywać całego kodu na nowo?

Podobne pytania

0 głosów
1 odpowiedź 8,868 wizyt
pytanie zadane 8 października 2017 w HTML i CSS przez faq1238 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 1,089 wizyt
0 głosów
3 odpowiedzi 1,015 wizyt
pytanie zadane 22 lipca 2016 w HTML i CSS przez niezalogowany

92,654 zapytań

141,543 odpowiedzi

319,953 komentarzy

62,022 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...