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

Div nie zajmuje całej wolnej przestrzeni

VPS Starter Arubacloud
+1 głos
331 wizyt
pytanie zadane 6 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,490 p.)

Witam. Tak to wygląda: 

Jednostka dla tego czarnego diva to vh. 100vh. I wiem, że właśnie tak ta jednostka działa, ale czy jest sposób, żeby ten div zajął całą możliwą przestrzeń? Kod html: 

<div id="oblique">
    <img src="../../assets/img/logo.png">
</div>
<ng-content></ng-content>

CSS:

@media(max-height: 568px), (max-width: 820px) {
    #oblique, #oblique>img {
        display: none;
    }
}

@media(min-height: 568px), (min-width: 820px) {
    #oblique {
        float: left;
        border-top: 100vh solid #202020;
        border-right: 10vw solid transparent;
        width: 50vw;
    }
    #oblique>img {
        position: absolute;
        top: 50%;
        left: 27.5%;
        transform: translate(-50%, -50%);
    }
}

Dzięki za pomoc!

1 odpowiedź

+2 głosów
odpowiedź 6 lipca 2021 przez pablop76 VIP (123,060 p.)
wybrane 6 lipca 2021 przez Szyszka
 
Najlepsza

U mnie działa więc może coś się wczytuje z cache. 

Mamy w css taka właściwość jak skew, która chyba lepiej się nadaje do efektu "obcięcia", ale to tak na marginesie ponieważ Twój sposób działa.

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/100x100?text=logo" alt="" class="logo">
    <div class="skew"></div>
  </div>
  <div class="right"></div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  height: 100vh;
  display: flex;
}
.left{
  width: 50%;
  background-color: #000;
  position: relative;
}
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.skew{
  width: 200px;
  height: 100%;
  background-color: #000;
  margin-left: calc(100% - 100px);
  transform: skew(-5deg);
}

 

komentarz 6 lipca 2021 przez Szyszka Gaduła (3,490 p.)
Twój sposób ma ten sam błąd. Ale to moja wina, zapomniałem dodać, że dzieje się tak po pojawieniu się scrolla.
komentarz 6 lipca 2021 przez pablop76 VIP (123,060 p.)
Nie mogę odtworzyć twojego błędu :(
komentarz 6 lipca 2021 przez Szyszka Gaduła (3,490 p.)
Musisz zmniejszać okno przeglądarki w pionie, aż pojawi się scroll. I wtedy scrollem przewijasz na dół i tam to widać :D
komentarz 6 lipca 2021 przez VBService Ekspert (251,210 p.)
edycja 6 lipca 2021 przez VBService

@pablop76,  

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/100x100?text=logo" alt="" class="logo">
    <div class="skew"></div>
  </div>
  <div class="right">
  
    <div class="long"></div>

  </div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  height: 100vh;
  display: flex;
}
.left{
  width: 50%;
  background-color: #000;
  position: relative;
}
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.skew{
  width: 200px;
  height: 100%;
  background-color: #000;
  margin-left: calc(100% - 100px);
  transform: skew(-5deg);
}


.right {
  border: 1px solid orange;
}
.long {
  width: 20vw;
  border: 1px solid red;
  height: 1000px;
}

 

komentarz 6 lipca 2021 przez VBService Ekspert (251,210 p.)

Wygląda na to, że posiłkując się Twoim przykładem (@pablop76) zmiana w .container

height: 100vh; na height: 100%; "załatwia" problem.

<div class="container">
  <div class="left">
    <img src="https://via.placeholder.com/100x100?text=logo" alt="" class="logo">
    <div class="skew"></div>
  </div>
  <div class="right">
   
    <div class="long"></div>
 
  </div>
</div>
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container{
  width: 100%;
  height: 100%;
  display: flex;
}
.left{
  width: 50%;
  background-color: #000;
  position: relative;
}
.logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 99;
}
.skew{
  width: 200px;
  height: 100%;
  background-color: #000;
  margin-left: calc(100% - 100px);
  transform: skew(-5deg);
}
 
 
.right {
  border: 1px solid orange;
}
.long {
  width: 20vw;
  border: 1px solid red;
  height: 1000px;
}

 

komentarz 6 lipca 2021 przez Szyszka Gaduła (3,490 p.)
U mnie to nie działa. Ale chyba wiem dlaczego. Kiedy rozdzielczość jest mała, to ten div "right" jest dłuższy od diva "left", i wtedy na stronie tworzy się scroll, żeby można było zobaczyć całą zawartość diva "left". Jednak po przewinięciu tej strony w dół, okazuje się, że ten div "right" nie roziąga się bardziej w dół, tylko jest tej samej wielkości. I wtedy, wydaje mi się, powstaje to białe niechciane pole pod divem "right".
1
komentarz 6 lipca 2021 przez pablop76 VIP (123,060 p.)
To znaczy, że formularz jest źle zaprojektowany lub przemyśl responsywność żeby przy małych rozdzielczościach zmienić układ elementów.

Podobne pytania

+1 głos
4 odpowiedzi 50,412 wizyt
pytanie zadane 8 lutego 2017 w HTML i CSS przez husarbilu Początkujący (370 p.)
0 głosów
1 odpowiedź 142 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Benek Szeryf (90,690 p.)
0 głosów
2 odpowiedzi 1,521 wizyt

92,453 zapytań

141,262 odpowiedzi

319,088 komentarzy

61,854 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

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 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!

...