Div nie zajmuje całej wolnej przestrzeni

Question

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!

Answer 1

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);
}

 

Comments

Twój sposób ma ten sam błąd. Ale to moja wina, zapomniałem dodać, że dzieje się tak po pojawieniu się scrolla.

---

Nie mogę odtworzyć twojego błędu :(

---

Musisz zmniejszać okno przeglądarki w pionie, aż pojawi się scroll. I wtedy scrollem przewijasz na dół i tam to widać :D

---

@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;
}

 

---

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;
}

 

---

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".

---

To znaczy, że formularz jest źle zaprojektowany lub przemyśl responsywność żeby przy małych rozdzielczościach zmienić układ elementów.