CSS - make list wrap zur Anpassung an die Höhe des Ansichtsfensters

Question

Ich möchte den Inhalt nach rechts verschieben, damit er in die Browserhöhe passt.

Wie Sie auf dem Screenshot sehen können, passt die Liste nicht auf den Bildschirm.

Beispiel:

#dropdown-menu-id 
 
{ 
 
    display: block !important; 
 
    top: 0 !important; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<ul role="menu" class=" dropdown-menu" id="dropdown-menu-id"> 
 
\t \t <li id="menu-item-816" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-816"><a href="http://localhost/index.php/destination/bregenzerwald/egg/">Egg</a></li> 
 
\t \t <li id="menu-item-817" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-817"><a href="http://localhost/index.php/destination/bregenzerwald/alberschwende/">Alberschwende</a></li> 
 
\t \t <li id="menu-item-818" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-818"><a href="http://localhost/index.php/destination/bregenzerwald/andelsbuch/">Andelsbuch</a></li> 
 
\t \t <li id="menu-item-819" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-819"><a href="http://localhost/index.php/destination/bregenzerwald/au/">Au</a></li> 
 
\t \t <li id="menu-item-820" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-820"><a href="http://localhost/index.php/destination/bregenzerwald/bezau/">Bezau</a></li> 
 
\t \t <li id="menu-item-854" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-854"><a href="http://localhost/index.php/destination/bregenzerwald/bizau/">Bizau</a></li> 
 
\t \t <li id="menu-item-856" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-856"><a href="http://localhost/index.php/destination/bregenzerwald/buch/">Buch</a></li> 
 
\t \t <li id="menu-item-858" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-858"><a href="http://localhost/index.php/destination/bregenzerwald/damuls/">Damüls</a></li> 
 
\t \t <li id="menu-item-860" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-860"><a href="http://localhost/index.php/destination/bregenzerwald/doren/">Doren</a></li> 
 
\t \t <li id="menu-item-862" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-862"><a href="http://localhost/index.php/destination/bregenzerwald/hittisau/">Hittisau</a></li> 
 
\t \t <li id="menu-item-864" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-864"><a href="http://localhost/index.php/destination/bregenzerwald/krumbach/">Krumbach</a></li> 
 
\t \t <li id="menu-item-866" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-866"><a href="http://localhost/index.php/destination/bregenzerwald/langenegg/">Langenegg</a></li> 
 
\t \t <li id="menu-item-868" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-868"><a href="http://localhost/index.php/destination/bregenzerwald/lingenau/">Lingenau</a></li> 
 
\t \t <li id="menu-item-870" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-870"><a href="http://localhost/index.php/destination/bregenzerwald/mellau/">Mellau</a></li> 
 
\t \t <li id="menu-item-872" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-872"><a href="http://localhost/index.php/destination/bregenzerwald/reuthe/">Reuthe</a></li> 
 
\t \t <li id="menu-item-874" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-874"><a href="http://localhost/index.php/destination/bregenzerwald/riefensberg/">Riefensberg</a></li> 
 
\t \t <li id="menu-item-876" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-876"><a href="http://localhost/index.php/destination/bregenzerwald/schnepfau/">Schnepfau</a></li> 
 
\t \t <li id="menu-item-878" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-878"><a href="http://localhost/index.php/destination/bregenzerwald/schoppernau/">Schoppernau</a></li> 
 
\t \t <li id="menu-item-880" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-880"><a href="http://localhost/index.php/destination/bregenzerwald/schrocken/">Schröcken</a></li> 
 
\t \t <li id="menu-item-882" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-882"><a href="http://localhost/index.php/destination/bregenzerwald/schwarzenberg/">Schwarzenberg</a></li> 
 
\t \t <li id="menu-item-884" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-884"><a href="http://localhost/index.php/destination/bregenzerwald/sibratsgfall/">Sibratsgfäll</a></li> 
 
\t \t <li id="menu-item-886" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-886"><a href="http://localhost/index.php/destination/bregenzerwald/sulzberg/">Sulzberg</a></li> 
 
\t \t <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">Warth</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">12</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">11</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">10</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">9</a></li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">8</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">7</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">6</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">5</a></li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">4</a></li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">3</a></li><li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">2</a></li> 
 
    <li id="menu-item-888" class="menu-item menu-item-type-post_type menu-item-object-destination menu-item-888"><a href="http://localhost/index.php/destination/bregenzerwald/warth/">1</a></li> 
 
\t </ul>

Wie Sie die Liste sehen kann in den Browser doesnt passen.

Answer 1

Sie haben zwei Möglichkeiten ...

Option 1: Liste ist Ansichtsfenster Höhe.

In dieser Option wird Ihre Liste durch die Höhe des Bildschirms begrenzt und scrollbar.

ul{ 
    background:#CCC; 
    display:block; 
    width:200px; 
    height:100vh; 
    overflow:auto; 
} 

Der Tastencode Aufmerksamkeit hier zu zahlen ist height:100vh oder „Höhe ist 100% der Höhe des Ansichtsfenster.“ und die overflow:auto; oder "ausblenden und den übergelaufenen Text scrollbar machen."

Option 2: Liste hat maximale Höhe.

In dieser Option definieren Sie eine Höhe, zum Beispiel 200px und setzen den Überlauf auf auto.

ul{ 
    background:#EEE; 
    display:block; 
    width:200px; 
    height:300px; 
    overflow:auto; 
} 

können Sie sehen beide Versionen auf meinem Fiddle hier.