CSS - 使列表包裝以適應視口高度

Question

我想將它的內容包裝到正確的位置，以適應瀏覽器的高度。如你在屏幕截圖中看到的那樣，列表不適合顯示在屏幕上。

例子：

#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>

正如你可以看到列表中犯規融入瀏覽器。

Answer 1

您有兩種選擇...

選項1：列表是視口高度。

在這個選項中，你的列表將被屏幕的高度限制並變成可滾動的。

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

的關鍵代碼要注意這裏是height:100vh或「高度是視口的高度的100％。」和overflow:auto;或「隱藏並使溢出的文本可滾動」。

選項2：列表具有最大高度。

在此選項中，您將定義高度，例如200px，並將溢出設置爲自動。

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

你可以看到我的Fiddle這裏兩個版本。