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

Lista wychodzi poza diva

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

Witam. Mam listę, która wychodzi poza diva, czego bym nie chciał. Nie mam jednak pomysłu, jak zrobić, aby spoza tego diva nie wychodziła. Wartości w % nie działają, w vh też. Tak wygląda kod html:

<div id="container">
    <div id="above-list">
        <div id="profile">
            <img src="../../../assets/img/cat.png" class="img">
            <div id="name">Nieznany Anonimek</div>
        </div>
        <div id="header">
            Chats
        </div>
    </div>
    <ul id="contacts">
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>

    </ul>
</div>

A tak CSS:

* {
    box-sizing: border-box;
}

#container {
    max-height: 95vh;
    height: 95vh;
    width: 20%;
    color: #ffffff;
    min-width: 350px;
    background-color: #202020;
    font-family: 'Comfortaa', cursive;
}

#above-list {
    padding: 20px;
}

#profile {
    display: flex;
    font-size: 20px;
    align-items: center;
}

#name {
    padding-left: 20px;
}

.img {
    max-width: 60px;
    max-height: 60px;
    border-radius: 50%;
}

#header {
    color: #EC4C4C;
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    padding-top: 20px;
    margin-bottom: 20px;
}

#contacts {
    overflow: auto;
    max-height: 100%;
}

Dlaczego tak się dzieje? Tak wygląda efekt:

https://imgur.com/a/2gmW8Db

3 odpowiedzi

+1 głos
odpowiedź 14 lipca 2021 przez VBService Ekspert (251,170 p.)
wybrane 15 lipca 2021 przez Szyszka
 
Najlepsza

A może grid-a użyjesz.  smiley

 

Przykład

<div class="container">

  <div id="above-list" class="above-list">
    <div id="profile" class="profile">
      <img src="../../../assets/img/cat.png" class="img">
      <div id="name" class="name">Nieznany Anonimek</div>
    </div>
    <div id="header" class="header">
      Chats
    </div>
  </div>

  <div class="contacts">
    <ul>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li> 
    </ul>
  </div>

  <div class="some-div"></div>

  <div class="main-content"></div>

</div>
* {
  box-sizing: border-box;
}
html, body, .container {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: 25% 1fr;
  grid-template-rows: 15vh 80vh 5vh;
  gap: 0px 0px;
  grid-template-areas:
    "above-list main-content"
    "contacts main-content"
    "some-div main-content";
}

.above-list, 
.contacts,
.some-div {
  color: #ffffff;
  background-color: #202020;
  font-family: 'Comfortaa', cursive;
}
.above-list { 
  grid-area: above-list;
  padding: 20px;
}
.above-list .profile {
  display: flex;
  font-size: 20px;
  align-items: center;
}
.above-list .img {
  max-width: 60px;
  max-height: 60px;
  border-radius: 50%;
}
.above-list .name {
  padding-left: 20px;
}
.above-list .header {
  color: #EC4C4C;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding-top: 20px;
  margin-bottom: 20px;
}

.contacts { 
  grid-area: contacts;
  overflow-y: auto;
  overflow-x: hidden;
}

.some-div { 
  grid-area: some-div;
  
  /* dla demonstracji */
  background-color: green;
}

.main-content { 
  grid-area: main-content;
  
  /* dla demonstracji */
  background-color: pink;
}

 

 

druga sprawa lepszą praktyką jest odnoszenie się w css-ie po klasach a nie id elementu. ID vs Class CSS - Understanding the Differences:  [ 1 ]  [ 2 ]

 

komentarz 15 lipca 2021 przez Szyszka Gaduła (3,490 p.)
Niby grid fajny pomysł, ale nigdy nie umiałem w nim określić min-width i nie znalazłem jeszcze informacji na ten temat. Do tego overflow-y podczas zmniejszania wysokości strony zamiast się zmniejszać (przycisk tego overflowa), to grid-area "contacts" zachodzi na above-list, czego też bym nie chciał :/
komentarz 15 lipca 2021 przez VBService Ekspert (251,170 p.)
edycja 15 lipca 2021 przez VBService

W przykładzie powyżej nie uwzględniłem w kodzie wszystkich możliwych wariantów, to wymaga dodania kodu, nie znam Twojego projektu, nie chciałem pozbawiać Ciebie możliwości udoskonalenia podanej propozycji i dopasowania do Twoich potrzeb.

Responsywność możesz uzyskać m. in. korzystając:

Spróbuj się zapoznać z How to Use minmax() CSS Grid  smiley

lub przez użycie @media np.:

@media (max-width: 1920px) and (min-width: 1080px) {
   . . .
}

 

komentarz 15 lipca 2021 przez Szyszka Gaduła (3,490 p.)
O, wielkie dzięki! A jak zaradzić temu, żeby "contacts"  nie zachodziło na "above-list", tylko się na nim jakby "blokowało" i zmniejszała by się tylko ilość widocznych na raz elementów z listy kontaktów?
komentarz 15 lipca 2021 przez VBService Ekspert (251,170 p.)
edycja 15 lipca 2021 przez VBService

Tak na szybko napisane, żeby Tobie naświetlić rozwiązanie,. np.:

@media (max-width: 1920px) and (min-width: 1080px) {
  .container {
    grid-template-columns: 25% 1fr;
  }  
}

@media (max-width: 1080px) and (min-width: 900px) {
  .container {
    grid-template-columns: 35% 1fr;
  }  
}

@media (max-width: 900px) and (min-width: 600px) {
  .container {
    grid-template-columns: 45% 1fr;
  }  
}

@media (max-width: 600px) and (min-width: 0px) {
  .container {
    grid-template-columns: 75% 1fr;
  }  
}

lub np.:

@media (max-width: 1920px) and (min-width: 1080px) {
  .container {
    grid-template-columns: 25% 1fr;
  }  
}

@media (max-width: 1080px) and (min-width: 100px) {
  .container {
    grid-template-columns: 350px 1fr;
  }  
}

lub np.:

@media (max-width: 1920px) and (min-width: 1080px) {
  .container {
    grid-template-columns: 25% 1fr;
  }  
}

@media (max-width: 1080px) and (min-width: 900px) {
  .container {
    grid-template-columns: 300px 1fr;
  }  
}

@media (max-width: 900px) and (min-width: 100px) {
  .container {
    grid-template-columns: 250px 1fr;
  }
  .above-list .name {
    padding-left: 10px;
    font-size: 90%;
  }
}

 

całość dla pierwszego przykładu

<div class="container">
 
  <div id="above-list" class="above-list">
    <div id="profile" class="profile">
      <img src="../../../assets/img/cat.png" class="img">
      <div id="name" class="name">Nieznany Anonimek</div>
    </div>
    <div id="header" class="header">
      Chats
    </div>
  </div>
 
  <div class="contacts">
    <ul>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li> 
    </ul>
  </div>
 
  <div class="some-div"></div>
 
  <div class="main-content"></div>
 
</div>
* {
  box-sizing: border-box;
}
html, body, .container {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 15vh 80vh 5vh;
  gap: 0px 0px;
  grid-template-areas:
    "above-list main-content"
    "contacts main-content"
    "some-div main-content";
}
 
.above-list, 
.contacts,
.some-div {
  color: #ffffff;
  background-color: #202020;
  font-family: 'Comfortaa', cursive;
}
.above-list { 
  grid-area: above-list;
  padding: 20px;
}
.above-list .profile {
  display: flex;
  font-size: 20px;
  align-items: center;
}
.above-list .img {
  max-width: 60px;
  max-height: 60px;
  border-radius: 50%;
}
.above-list .name {
  padding-left: 20px;
}
.above-list .header {
  color: #EC4C4C;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding-top: 20px;
  margin-bottom: 20px;
}
 
.contacts { 
  grid-area: contacts;
  overflow-y: auto;
  overflow-x: hidden;
}
 
.some-div { 
  grid-area: some-div;
   
  /* dla demonstracji */
  background-color: green;
}
 
.main-content { 
  grid-area: main-content;
   
  /* dla demonstracji */
  background-color: pink;
}


@media (max-width: 1920px) and (min-width: 1080px) {
  .container {
    grid-template-columns: 25% 1fr;
  }  
}

@media (max-width: 1080px) and (min-width: 900px) {
  .container {
    grid-template-columns: 35% 1fr;
  }  
}

@media (max-width: 900px) and (min-width: 600px) {
  .container {
    grid-template-columns: 45% 1fr;
  }  
}

@media (max-width: 600px) and (min-width: 0px) {
  .container {
    grid-template-columns: 75% 1fr;
  }  
}

 

komentarz 15 lipca 2021 przez Szyszka Gaduła (3,490 p.)

Chyba się trochę nie zrozumieliśmy  laugh. Chodzi o to, że podczas zmniejszania wysokości div "contacts" zasłania diva "above-list" zamiast zmniejszania się ilości widocznych elementów listy.

komentarz 15 lipca 2021 przez VBService Ekspert (251,170 p.)
edycja 15 lipca 2021 przez VBService

Analogicznie operujesz na @media np.:

@media (max-height: 900px) and (min-height: 100px) {
.container {
  grid-template-rows: 110px 1fr 30px;  
}

<div class="container">
  
  <div id="above-list" class="above-list">
    <div id="profile" class="profile">
      <img src="../../../assets/img/cat.png" class="img">
      <div id="name" class="name">Nieznany Anonimek</div>
    </div>
    <div id="header" class="header">
      Chats
    </div>
  </div>
  
  <div class="contacts">
    <ul>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li>
        <li><app-contact></app-contact></li> 
    </ul>
  </div>
  
  <div class="some-div"></div>
  
  <div class="main-content"></div>
  
</div>
* {
  box-sizing: border-box;
}
html, body, .container {
  height: 100%;
  margin: 0;
}
.container {
  display: grid;
  grid-template-columns: 20% 1fr;
  grid-template-rows: 25vh 65vh 10vh;
  gap: 0px 0px;
  grid-template-areas:
    "above-list main-content"
    "contacts main-content"
    "some-div main-content";
}
  
.above-list, 
.contacts,
.some-div {
  color: #ffffff;
  background-color: #202020;
  font-family: 'Comfortaa', cursive;
}
.above-list { 
  grid-area: above-list;
  padding: 20px;
}
.above-list .profile {
  display: flex;
  font-size: 20px;
  align-items: center;
}
.above-list .img {
  max-width: 60px;
  max-height: 60px;
  border-radius: 50%;
}
.above-list .name {
  padding-left: 20px;
}
.above-list .header {
  color: #EC4C4C;
  text-align: center;
  font-size: 30px;
  font-weight: bold;
  padding-top: 20px;
  margin-bottom: 20px;
}
  
.contacts { 
  grid-area: contacts;
  overflow-y: auto;
  overflow-x: hidden;
}
  
.some-div { 
  grid-area: some-div;
    
  /* dla demonstracji */
  background-color: green;
}
  
.main-content { 
  grid-area: main-content;
    
  /* dla demonstracji */
  background-color: pink;
}
 
 
@media (max-width: 1920px) and (min-width: 1080px) {
  .container {
    grid-template-columns: 25% 1fr;
  }  
}
 
@media (max-width: 1080px) and (min-width: 900px) {
  .container {
    grid-template-columns: 300px 1fr;
  }  
}
 
@media (max-width: 900px) and (min-width: 100px) {
  .container {
    grid-template-columns: 250px 1fr;
  }
  .above-list .name {
    padding-left: 10px;
    font-size: 90%;
  }
}

@media (max-height: 900px) and (min-height: 100px) {
.container {
  grid-template-rows: 110px 1fr 30px;  
}

 

IMHO grid i @media naprawę dają dużo możliwości.  wink

1
komentarz 15 lipca 2021 przez Szyszka Gaduła (3,490 p.)

Dzięki, ale teraz też zobaczyłem, że above-list ma wielkość 15vh laugh. Zmieniłem to na auto, i działa jak marzenie. Dzięki!

komentarz 15 lipca 2021 przez VBService Ekspert (251,170 p.)

To były tylko sugestie, projekt jest Twój.  wink

0 głosów
odpowiedź 14 lipca 2021 przez KamQiX Dyskutant (9,090 p.)

A do czego Ci max-height: 95vh; i height: 95vh; do identyfikatora container? Kiedy to usuwam wygląda, że działa poprawnie. Nie wiem jaki efekt chcesz uzyskać.

komentarz 14 lipca 2021 przez Szyszka Gaduła (3,490 p.)
Muszę mieć 5vh wolnego miejsca, ponieważ w przyszłości tam na dole umieszczę diva o wysokości własnie 5vh. A  poza tym po usunięciu tego też to nie działa, ponieważ container rozciąga się na całą stronę, a powinien utworzyć się scroll dla #contacts
0 głosów
odpowiedź 14 lipca 2021 przez Us Użytkownik (880 p.)
edycja 14 lipca 2021 przez Us

Siema,

Spróbuj ustawić #contacts na max-height: 77.3vh; lub max-height: 81.3%; W tej chwili masz 100%, co się sprawdzi jedynie, kiedy ukryjesz/usuniesz całe pole tytułowe #above-list, ponieważ jego wielkość również jest brana pod uwagę dla wysokości kontenera. Pamiętaj, że musisz brać pod uwagę wielkość każdego elementu w kontenerze, kiedy chcesz dokładnie obliczyć wysokość. 

W Twoim kodzie problemem jest również brak responsywności. Przy mniejszym okienku moje powyższe ustawienia dalej będą powodować błąd. A można to rozwiązać wyciągając pole tytułowe po za kontener i nadając liście z powrotem max-height:100%, lub użyć reguł css @media only screen dla żmudnego ustawienia responsywności lub użyć biblioteki bootstrap chyba, że nie chcesz dodatkowych obciążeń dla witryny.

 

Podobne pytania

0 głosów
1 odpowiedź 325 wizyt
pytanie zadane 14 października 2022 w Python przez Ichbinda Nowicjusz (230 p.)
0 głosów
0 odpowiedzi 1,877 wizyt
pytanie zadane 5 stycznia 2019 w C i C++ przez niezalogowany
0 głosów
2 odpowiedzi 999 wizyt
pytanie zadane 6 października 2017 w C# przez Corazzo Obywatel (1,040 p.)

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 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!

...