• 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

Object Storage Arubacloud
+1 głos
365 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,180 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,180 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 (254,570 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 (254,570 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,180 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 51,114 wizyt
pytanie zadane 8 lutego 2017 w HTML i CSS przez husarbilu Początkujący (370 p.)
0 głosów
1 odpowiedź 148 wizyt
pytanie zadane 15 lutego 2017 w HTML i CSS przez Benek Szeryf (91,190 p.)
0 głosów
2 odpowiedzi 1,632 wizyt

92,687 zapytań

141,599 odpowiedzi

320,089 komentarzy

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

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!

...