• 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

Aruba Cloud - Virtual Private Server VPS
0 głosów
326 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 (606,610 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ź 9,158 wizyt
pytanie zadane 8 października 2017 w HTML i CSS przez faq1238 Nowicjusz (120 p.)
0 głosów
1 odpowiedź 1,183 wizyt
0 głosów
3 odpowiedzi 1,220 wizyt
pytanie zadane 22 lipca 2016 w HTML i CSS przez niezalogowany

93,333 zapytań

142,326 odpowiedzi

322,405 komentarzy

62,669 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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...