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">
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
		<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>
	</ul>

如您所见，列表不适合浏览器。

Answer 1

你有两个选择......

选项1：列表是视口高度。

在此选项中，您的列表将受到屏幕高度的限制并变为可滚动。

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

此处需要注意的关键代码是height:100vh或＆＃34;高度是视口高度的100％。＆＃34; 和{{ 1}}或＆＃34;隐藏并使溢出的文本可滚动。＆＃34;

选项2：列表具有最大高度。

在此选项中，您将定义高度，例如overflow:auto;并将溢出设置为自动。

200px

您可以在我的 Fiddle 上看到这两个版本。