No replies
doctor-f
doctor-f's picture
Offline
newbie
Last seen: 5 weeks 2 days ago
Timezone: GMT+3
Joined: 2020-04-21
Posts: 1
Points: 2

I have a page with two div. The first one shows a vertical menu. It is a common ul-li list. I also have a CSS file to form it. My problem is that when window height is small, then menu div has not the right height. See the attached image to understang what I am saying. As you see, if browser's height is too small then the div is not as tall enough as it should be. The div should continue after the last list item in the menu but it doesn't. When the window is miximazed them everything seems fine. What can I do to fix it?
I use "min-height: 100vh" as with "height: 100%" and "height: 100vh" the result was worse, div didn't reach the end of the menu. What am I doing wrong?

The HTML code of the menu:

<div id="navigation">
<img style="display:block; margin:auto;" src="logo.png">
  <ul>
    <li> <a href="#home" onclick="loadurl('home.html');">Αρχική</a></li>
	<li> <a href="#">Επιλογή 1</a></li>
	<li> <a href="#">Επιλογή 2</a></li>
	<li class="has-sub"> <a href="#">Ιστορικό</a>
	  <ul>
		<li class="has-sub"><a href="Javascript:void(0);">Έτη 2011-2020</a><ul>
		   <li><a id="#2020" href="#2020" onclick="loadurl('2020.html');">2020</a></li>
		   <li><a id="#2019" href="#2019" onclick="loadurl('2019.html');">2019</a></li>
		  </ul></li>
		<li class="has-sub"><a href="Javascript:void(0);">Έτη 2000-2010</a>
		  <ul>
		   <li><a id="#2008" href="#2008" onclick="loadurl('2008.html');">2008</a></li>
		   <li><a id="#2006" href="#2006" onclick="loadurl('2006.html');">2006</a></li>
		  </ul>
		</li>
	  </ul>
	</li>
    <li> <a href="#">Επιλογή 4</a></li>
    <li> <a href="#">Επιλογή 5</a></li>
  </ul>
</div>

The CSS code:
html, body {
     height: 100%;
     margin: 0;
}
 .content {
     display:inline-block;
     height: 99%;
     border: 1px solid black;
     float: left;
     width: auto;
}
 .navigation {
     float: left;
     padding: 0;
     margin: 0;
     margin-right: 8px;
     line-height: 1;
     border: 1px solid red;
     width: 13em;
     min-height: 100vh;
     position: relative;
     background: #ffca0a;
     font-family: 'roboto', Tahoma, Arial, sans-serif;
     zoom: 1;
}
 .navigation ul, .navigation ul li, .navigation ul ul {
     list-style: none;
     margin: 0;
     padding: 0;
}
 .navigation ul {
     position: relative;
     z-index: 500;
     float: left;
}
 .navigation ul li {
     float: left;
     min-height: 0.05em;
     line-height: 0.8em;
     vertical-align: middle;
     position: relative;
}
 .navigation ul li.hover, .navigation ul li:hover {
     position: relative;
     z-index: 510;
     cursor: default;
}
 .navigation ul ul {
     visibility: hidden;
     position: absolute;
     top: 100%;
     left: 0px;
     z-index: 520;
     width: 100%;
}
 .navigation ul ul li {
     float: none;
}
 .navigation ul ul ul li {
     float: none;
     height: 40px;
}
 .navigation ul ul ul {
     width: 50%;
     top: 0;
     right: 0;
}
 .navigation ul li:hover > ul {
     visibility: visible;
}
 .navigation ul ul {
     top: 0;
     left: 99%;
}
 .navigation ul li {
     float: none;
}
 .navigation ul ul {
     margin-top: 0.05em;
     background: #ffca0a;
}
 .navigation:before {
     content: '';
     display: block;
}
 .navigation:after {
     content: '';
     display: table;
     clear: both;
}
 .navigation a {
     display: block;
     padding: 1em 1.0em;
     color: #019;
     text-decoration: none;
}
 .navigation > ul {
     width: 13em;
}
 .navigation ul ul {
     width: 13em;
}
 .navigation > ul > li > a {
     color: #034;
}
 .navigation > ul > li > a:hover {
     color: #0ff;
}
 .navigation ul > ul > li a:hover {
     background: #ff9a0a;
}
 .navigation ul li a:hover, .navigation ul li:hover {
     background: #ff9a0a;
}
 .navigation ul li:hover {
     background: #ff9a0a;
}
 .navigation li {
     position: relative;
     border-bottom: 1px solid #555555;
}
 .navigation ul li.has-sub > a:after {
     content: '»';
     position: absolute;
     right: 1em;
}
 .navigation ul ul li.first {
     -webkit-border-radius: 0 3px 0 0;
     -moz-border-radius: 0 3px 0 0;
     border-radius: 0 3px 0 0;
}
 .navigation ul ul li.last {
     -webkit-border-radius: 0 0 3px 0;
     -moz-border-radius: 0 0 3px 0;
     border-radius: 0 0 3px 0;
     border-bottom: 0;
}
 .navigation ul ul {
     -webkit-border-radius: 0 3px 3px 0;
     -moz-border-radius: 0 3px 3px 0;
     border-radius: 0 3px 3px 0;
     width: 80%;
}
 .navigation ul ul {
     border: 1px solid #555555;
}
 .navigation ul ul a {
     color: #034;
     width: auto;
}
 .navigation ul ul a:hover {
     color: #ffffff;
}
 .navigation ul ul li {
     border-bottom: 1px solid #555555;
}
 .navigation ul ul li:hover > a {
     background: #ff9a0a;
     color: #ffffff;
     line-height: 0.8em;
}
 .navigation ul ul ul li:hover > a {
     background: #ff9a0a;
     color: #ffffff;
     line-height: 0.5em;
}
 .navigation.align-right > ul > li > a {
     border-left: 0.3em solid #555555;
     border-right: none;
}
 .navigation.align-right {
     float: right;
}
 .navigation.align-right li {
     text-align: right;
}
 .navigation.align-right ul li.has-sub > a:before {
     content: '+';
     position: absolute;
     top: 50%;
     left: 15px;
     margin-top: -6px;
}
 
.navigation.align-right ul ul li.first {
  -webkit-border-radius: 3px 0 0 0;
  -moz-border-radius: 3px 0 0 0;
  border-radius: 3px 0 0 0;
}
 
.navigation.align-right ul ul li.last {
  -webkit-border-radius: 0 0 0 3px;
  -moz-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
}
 
.navigation.align-right ul ul {
  -webkit-border-radius: 3px 0 0 3px;
  -moz-border-radius: 3px 0 0 3px;
  border-radius: 3px 0 0 3px;
}

AttachmentSize
imenu2.png37.47 KB