How do I set my scrollbar to display only in one div
Question
I am working on an angular SPA that is supposed to generate several searchable lists of data within separate tabs. 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.
For that purpose, I have defined my css as follows:
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. Is there a way to accomplish what I have in mind through pure css or am I forced to do it through javascript?
1 answers
solution1
0 2015-07-01 12:06:26
To set percentual value on ul, you'll have to set the wrapping div's height.
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, 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. I suggest putting an input before the ul element. It will have better usability.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.