Good evening everyone, please tell me how to align ul li inside the div with the entire height and width, that is, if the div becomes smaller or larger then li desirable to fill the whole space? I make a drop-down list, the elements should be placed vertically.

 <div> <ul> <li>11111111111111</li> <li>2222222222</li> <li>3333333333333</li> <li>4444444444</li> <ul> </div>
  • If you are given an exhaustive answer, mark it as correct (a daw opposite the selected answer). - Nicolas Chabanovsky ♦

3 answers 3

 * { box-sizing: border-box; } ul { height: 100%; margin: 0; } li { height: 25%; outline: 1px dottes blue; } li:hover { background: silver; } li:after { content: ""; height: 100%; display: inline-block; vertical-align: middle; } div { animation: h 3s linear infinite; border: 1px solid red; } @keyframes h { 0% { height: 6em; } 50% { height: 18em; } 100% { height: 6em; } } 
 <div> <ul> <li>11111111111111</li> <li>2222222222</li> <li>3333333333333</li> <li>4444444444</li> </ul> </div> 

     *{ margin:0; padding:0; } div{ padding:20px 4px; background:#ccc; width:200px; margin:10px; } div h3{ text-align:center; padding-bottom:10px; } div ul{ background:#f3f5f6; border-right:3px solid #f3f5f6; } ul li{ list-style:none; display:block; background:#ccc; width:200px; height:30px; text-align:center; line-height:30px; border-bottom:1px solid #f3f5f6; position:relative; } ul li a{ text-decoration:none; color:#f3f5f6; } ul>li:nth-child(3)>ul{ position:absolute; left:-210px; top:-1000px; width:200px; height:auto; border-left:3px solid #f3f5f6; display:non; z-index:-3; transition:.5s;-webkit-transition:.5s;-moz-transition:;.5s } ul>li>ul:after{ content:""; display:block; width:30px; height:30px; background:; position:absolute; top:0;left:-20px; z-index:10; } ul>li:nth-child(3):hover ul{ display:block; left:210px; top:0; z-index:9; } div>ul>li:nth-child(3):after{ content:''; border:10px solid transparent; border-left:10px solid #fefefe; position:absolute; right:-3px; top:5px; } 
     <div> <h3>Меню проэкта</h3> <ul> <li><a href="#">первая ссылка меню</a></li> <li><a href="#">вторая ссылка меню</a></li> <li><a href="#">третья ссылка меню</a> <ul> <li><a href="#">первая из третьего</a></li> <li><a href="#">вторая ссылка из 3</a></li> <li><a href="#">третья ссылка из 3</a></li> <li><a href="#">это ссылка 4 из 3</a></li> </ul> </li> <li><a href="#">это ссылка о авторе</a></li> </ul> </div>

    here so likely ??

    • Great done, thank you, but it is possible that if you click on the "third menu link" a new submenu did not open next to it and fell to the bottom, thereby moving the "this link about the author" block to the bottom. What would the menu and submenu fell to the bottom. - user3319778
    • a - well, type - jqueryui.com/accordion or what ?? - user33274
    • here is greasy => w3schools.com/howto/… - user33274
    • oo for sure, the accordion will be just right, thank you very much, right now I’m talking and stumbling over all the plus signs) - user3319778
    • cloud.mail.ru/public/LTxj/Pmy1PPr23 here's another one on pure css3 - user33274

    The problem with the following code is to vertically align the contents of li . To get around the problem, inside li use a div and do it in-centering for it, although the li markers of the elements still remain not--centered.

     .div0 { height: 200px; width: 700px; background-color: orchid; } .ul0 { height: 100%; width: 400px; background-color: violet; display: flex; flex-direction: column; vertical-align: middle; } .ul0 li { flex: 1; background-color: pink; } li div{ padding: auto 0; margin: 0; position: absolute; top: 0; transform: translate(0, 50%) } } li:nth-child(2n) { background-color: white; } 
     <nav class="div0"> <ul class="ul0"> <li> <div>11111111111111</div> </li> <li>2222222222</li> <li>3333333333333</li> <li>4444444444</li> <ul> </nav>