Vertical Extension List Elements

Question

I am creating a phonegap application. I have the following:

<ul> <li>One</li> <li>Two</li> <li>Three</li> <li>Three <br>a Half</li> </ul> 

How can I make the <li> elements stretch vertically and fill the entire height of the page, given that this needs to be dynamic so that it adapts to other viewports. The text inside the <li> elements should be vertically centered and support multiple lines.

Is there any clean way to do this?

Answer 1

I suggest using the CSS3 display: table family of rules. They will be dynamic and will maintain a full height range if everything is done correctly:

 body, html { height: 100%; margin: 0; } ul { list-style-type: none; margin: 0; padding: 0; display: table; width: 100%; height: 100%; } ul li { display: table-row; } ul li a { /* assuming an anchor child. Can be anything */ display: table-cell; vertical-align: middle; padding: 1em 3em; } 

Demo: http://jsfiddle.net/6z3q35x0/1/

Answer 2

Here is a JavaScript solution that will give height according to the height viewport.

Force ul to take the entire viewport height:

Demo on the script

 var li = document.getElementsByTagName('li'); function doMath() { for (i = 0; i < li.length; i++) { li[i].style.height = window.innerHeight / li.length + 'px'; } } doMath(); window.onresize = doMath; 

 ul { margin: 0; padding: 0; list-style: none; } li { background: rosybrown; } span { display: block; position: relative; top: 50%; text-align: center; transform: translateY(-50%); } li:nth-of-type(2n) { background: plum; } body { margin: 0; } 

 <ul> <li><span>One</span></li> <li><span>Two</span></li> <li><span>Three</span></li> <li><span>Three<br />a Half</span></li> <li><span>Four</span></li> <li><span>Five<br />a Half</span></li> <li><span>Six</span></li> </ul> 

---

Force li to take the entire height of the viewport:

Demo on the script

 var li = document.getElementsByTagName('li'); function doMath() { for (i = 0; i < li.length; i++) { li[i].style.height = window.innerHeight + 'px'; } } doMath(); window.onresize = doMath; 

 ul { padding: 0; margin: 0; list-style: none; } li { background: rosybrown; } span { display: block; position: relative; top: 50%; text-align: center; transform: translateY(-50%); } li:nth-of-type(2n) { background: plum; } body { margin: 0; } 

 <ul> <li><span>One</span></li> <li><span>Two</span></li> <li><span>Three</span></li> <li><span>Three<br />a Half</span></li> <li><span>Four</span></li> <li><span>Five<br />a Half</span></li> <li><span>Six</span></li> </ul> 

Answer 3

Your question has two parts: the first is to make the <ul> element stretch to fill the viewport, and the second is to vertically and horizontally center the contents of the <li> . However, centering requires changes in your layout. We can wrap all content in <li> using the <div> elements.

To center for this we can use CSS3 flexbox. It will be a JS-free solution , although it does not support cross-browser. For the viewport size, we can use the units vw and vh respectively.

 ul { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; width: 100vw; height: 100vh; } li { display: flex; align-items: center; justify-content: center; flex-grow: 1; } li div { } /* For stylistics only */ li:nth-child(odd) { background-color: #ddd; } 

 <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/> <ul> <li><div>One</div></li> <li><div>Two</div></li> <li><div>Three</div></li> <li><div>Three <br>a Half</div></li> </ul> 

---

However, there may be situations where using CSS flexbox and view units are not ideal - for example, iOS7 has a well-documented rendering error that does not correctly calculate vh . In this case, we may have to rely on JS. The height of each <li> simply divided by the number of <li> present in the container.

 var calcHeight = function() { var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0); var li = document.querySelectorAll("ul li"); for(var i=0; i<li.length; i++) { li[i].style.height = (h/li.length)+'px'; } } calcHeight(); window.onresize = calcHeight(); 

 ul { list-style: none; margin: 0; padding: 0; width: 100%; height: 100vh; } li { display: block; width: 100%; position: relative; } li div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } li:nth-child(odd) { background-color: #ddd; } 

 <link href="http://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.min.css" rel="stylesheet"/> <ul> <li><div>One</div></li> <li><div>Two</div></li> <li><div>Three</div></li> <li><div>Three <br>a Half</div></li> </ul> 

Answer 4

You need to add 100% height to body and html, try

 <style> body, html { height: 100%; } ul { height: 100%; display: table; } li { height: 25%; display: table-row; } li div{ height: 25%; display: table-cell; vertical-align: middle; } </style> 

Jsfiddle Link: http://jsfiddle.net/d80xw55e/1/

Answer 5

Since you enable Javscript, it's pretty simple, I just can't get the bullet correctly. Hope you won't use this though?

 function liH(){ var lis = document.getElementsByTagName("li"); var spans = document.getElementsByTagName("span"); var liHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) / lis.length; for(var i = 0; i < lis.length; ++i){ var spanH = spans[i].getBoundingClientRect().height; lis[i].style.paddingTop = ((liHeight - spanH) / 2) + "px"; lis[i].style.paddingBottom = lis[i].style.paddingTop; //spans[i].style.top = -(spanH / 4) + "px" } } liH(); window.onresize = liH; 

 li {background:#eee;margin-bottom:5px;} span {position:relative;} 

 <ul> <li><span>elem1</span></li> <li><span>elem2</span></li> <li><span>elem<br />3</span></li> </ul> 

The reason the view is not accurate is due to the filling at the top, which will not be deleted, and because of the 5px field that I put in order to distinguish the elements.