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

Lista wychodzi poza diva

+1 głos
202 wizyt
pytanie zadane 14 lipca 2021 w HTML i CSS przez Szyszka Gaduła (3,040 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 Mędrzec (172,150 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,040 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 Mędrzec (172,150 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,040 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 Mędrzec (172,150 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,040 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 Mędrzec (172,150 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,040 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 Mędrzec (172,150 p.)

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

0 głosów
odpowiedź 14 lipca 2021 przez KamQiX Dyskutant (8,930 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,040 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 (820 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
0 odpowiedzi 1,178 wizyt
pytanie zadane 5 stycznia 2019 w C i C++ przez niezalogowany
0 głosów
2 odpowiedzi 745 wizyt
pytanie zadane 6 października 2017 w C# przez Corazzo Obywatel (1,040 p.)
0 głosów
1 odpowiedź 142 wizyt
pytanie zadane 7 września 2016 w Python przez shadou102 Pasjonat (21,520 p.)

88,355 zapytań

136,952 odpowiedzi

305,666 komentarzy

58,619 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Sklep oferujący ćwiczenia JavaScript, PHP, rozmowy rekrutacyjne dla programistów i inne materiały

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...