zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden flexbox-layout, scrolling für Liste erzwingen

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 25.06.2020, 18:00
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard flexbox-layout, scrolling für Liste erzwingen

Hallo ich habe ein Flexbox-Layout mit 3 Boxen, eine grosse oben 2 kleine unten.
Jetzt habe ich eine Liste oben, die eine festgelegte Höhe (ca 50% Höhe insgesamt) nicht überschreiten sollte, (scrollbar werden, wenn diese überschritten ist). Leider bekomme ich diese feste Höhe nicht hin. D.h. die Liste nimmt immer mehr Platz ein. Hat hier jemand einen Tip? Vielen Dank.

(Code und Bild)

HTML-Code:
    <div class="user-panel">

          <div class="user-panel-wrapper">  
           <div class="inbox-messages">

           <div class="inbox-messages-title">

           Inbox/messages for user...
           </div>
           <div class="inbox-messages-messages">
            <ul>
              <li>Message 1</li>
              <li>Message 2</li>
              <li>Message 3</li>
              <li>Message 4</li>
              <li>Message 5</li>
              <li>Message 6</li>
              <li>Message 7</li>
            </ul>

           </div>

          
            </div>

            <div class="users-box">

              <div class="users-list">

              List users
              </div>

              <div class="users-message-box">
              message box users

              </div>
            </div>

          </div> 
          </div>

<style>

/* user panel */

.user-panel {
  height: 90%;
  width: 95%;
  background-color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.user-panel-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
}

.inbox-messages {
  border: 1px solid green;
  width: 100%;
  height: 90%;
  display: flex;
  flex-direction: column;
  padding: 20px 20px;
}

.inbox-messages-title {
  width: 100%;
  /* height: 100%; */
}

.inbox-messages-messages {
  width: 100%;
}

.inbox-messages-messages ul {
  list-style-type: none;
  width: 100%;
  padding: 15px 0 0 0;
}
.inbox-messages-messages ul li {
  display: block;
  padding: 8px;
  margin: 5px 0 0 0;
  border: 1px solid red;
}

.users-box {
  display: flex;
  justify-content: center;
  border: 1px solid goldenrod;
  width: 100%;
  height: 100%;
}

.users-list {
  border: 1px solid royalblue;
  width: 100%;
  height: 100%;
}

.users-message-box {
  border: 1px solid red;
  width: 100%;
  height: 100%;
}

/* end of user panel */


</style>
Angehängte Grafiken
Dateityp: jpg user_panel.JPG (75,7 KB, 6x aufgerufen)
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 25.06.2020, 20:05
Erfahrener Benutzer
XHTMLforum-Mitglied
 
Registriert seit: 10.07.2018
Beiträge: 142
Sailor56 befindet sich auf einem aufstrebenden Ast
Standard

schreib mal zu dem CSS für die Klasse .inbox-messages noch folgendes Format hinzu...
Code:
overflow-y: scroll;
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 26.06.2020, 08:39
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

Verwende doch auch mehr an semantischem HTML als nur Listen:

Code:
<div class="inbox-messages-title">
  Inbox/messages for user...
</div>
In HTML gibt es <h1>, <h2>, ... um Überschriften festzulegen.

Ansonsten: Verwende overflow um Scrollbalken zu erzeugen. Dafür muss der Container aber zB eine max-height haben, damit er nicht größer wird als von dir gewünscht.
Mit Zitat antworten
  #4 (permalink)  
Alt 27.06.2020, 12:14
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 83
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von cloned Beitrag anzeigen
Verwende doch auch mehr an semantischem HTML als nur Listen:

Code:
<div class="inbox-messages-title">
  Inbox/messages for user...
</div>
In HTML gibt es <h1>, <h2>, ... um Überschriften festzulegen.

Ansonsten: Verwende overflow um Scrollbalken zu erzeugen. Dafür muss der Container aber zB eine max-height haben, damit er nicht größer wird als von dir gewünscht.
O.K. danke, ja, dann nehm ich <h4> als Überschrift und

HTML-Code:
.inbox-messages-messages {
  width: 100%;
  max-height: 200px;
  overflow-y: scroll;
}
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Header mit variabler Höhe msommer CSS 6 26.07.2011 11:41
Bitte um Hilfe - CSS und Prozentangaben sprefer CSS 3 01.03.2011 05:11
<li> von einer Liste in andere verschieben tichy Javascript & Ajax 5 16.07.2009 14:54
Untermenü im IE nici CSS 10 22.06.2009 22:19
Liste (inline) Umbruch erzeugen Steakfred CSS 3 09.05.2006 13:27


Alle Zeitangaben in WEZ +2. Es ist jetzt 00:36 Uhr.