如何将滚动条设置为仅在一个div中显示
[英]How do I set my scrollbar to display only in one div
问题描述
I am working on an angular SPA that is supposed to generate several searchable lists of data within separate tabs. 
我正在研究一个角度SPA，应该在单独的选项卡中生成几个可搜索的数据列表。 I have organized them in the following manner: 我按照以下方式组织了它们：
<body>
<tabset>
<tab>
<div class="listedData">
<ul>
<li class="searchBar"></li>
<li ng-repeat="iterateHere"></li>
</ul>
</div>
<div class="dataDetails">
</div>
</tab>
//... other tabs
</tabset>
</body>
I would like the page to take up the height of the screen and, since the list of data will probably take up more than that I would like to set up a scroll bar only inside the <ul> (preferably skipping the first element - searchBar ) but I can live with that. 我希望页面占据屏幕的高度，并且由于数据列表可能会占用更多的空间，因此我只想在<ul>内部设置滚动条（最好跳过第一个元素searchBar ），但我可以接受。
For that purpose, I have defined my css as follows: 为此，我将css定义如下：
html, body {
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
}
.listedData {
ul {
width: 15%;
float: left;
max-height: 95%;
overflow-y: auto;
}
}
But I am not getting the desired results, ie the list simply stretches out of screen to encase all the elements and I can scroll the entire page to see them. 但是我没有得到期望的结果，即列表只是延伸到屏幕之外以包围所有元素，并且我可以滚动整个页面以查看它们。 I have tried to set the height property for all the tags in the chain ( <tabset> , <tab> and <div> ) but it made no difference. 我尝试为链中的所有标签（ <tabset> ， <tab>和<div> ）设置height属性，但没有区别。 Is there a way to accomplish what I have in mind through pure css or am I forced to do it through javascript? 有没有办法通过纯CSS完成我的想法，还是我被迫通过JavaScript做到了？
1 个解决方案
解决方案1
0 2015-07-01 12:06:26
To set percentual value on ul, you'll have to set the wrapping div's height. 要在ul上设置百分比值，您必须设置包装div的高度。
if you want to have your scrollbar, you can use styles like below. 如果要使用滚动条，可以使用以下样式。 I changed the html and some values for the example to be clearer. 我为示例更改了html和一些值，以使其更加清晰。
html, body { height: 100%; width: 100%; padding: 0px; margin: 0px; } .listedData { height: 35%; width: 100%; } .listedData ul { width: 20%; max-height: 70%; overflow-y: auto; }
<body> <tabset> <tab> <div class="listedData"> <ul> <li class="searchBar">content li 1</li> <li ng-repeat="iterateHere"> content li 2</li> <li ng-repeat="iterateHere"> content li 3</li> <li ng-repeat="iterateHere"> content li 4</li> <li ng-repeat="iterateHere"> content li 5</li> <li ng-repeat="iterateHere"> content li 6</li> <li ng-repeat="iterateHere"> content li 7</li> <li ng-repeat="iterateHere"> content li 8</li> <li ng-repeat="iterateHere"> content li 9</li> </ul> </div> <div class="dataDetails"> </div> </tab> //... other tabs </tabset> </body>
Obs: for the scroll to skip only the seachbar it will be a lot more difficult. Obs：要使滚动仅跳过seachbar，将更加困难。 I suggest putting an input before the ul element. 我建议将输入放在ul元素之前。 It will have better usability. 它将具有更好的可用性。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.