10 Replies - 413 Views - Last Post: 21 April 2020 - 09:04 AM

#1 doctor-f   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-April 20

Div with full page height, not window height

Posted 20 April 2020 - 08:06 AM

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 image to understang what I am saying.
Posted Image
As you see, browser's height is too small and the div is not as tall enough as it should be. What can I do to fix it?

HTML code:
<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 file has the following 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;
}


It may not be clear enough. 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.

Is This A Good Question/Topic? 0
  • +

Replies To: Div with full page height, not window height

#2 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,524
  • Joined: 12-January 10

Re: Div with full page height, not window height

Posted 20 April 2020 - 08:14 AM

the image isnt showing up
Was This Post Helpful? 0
  • +
  • -

#3 doctor-f   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-April 20

Re: Div with full page height, not window height

Posted 20 April 2020 - 09:00 AM

View PostDarenR, on 20 April 2020 - 08:14 AM, said:

the image isnt showing up
if you copy past the link in a new tab?
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw   User is offline

  • palpable absurdity
  • member icon

Reputation: 6901
  • View blog
  • Posts: 28,559
  • Joined: 12-December 12

Re: Div with full page height, not window height

Posted 20 April 2020 - 09:57 AM

Here is the link. It is to an external source, not directly to an image.

My link
Was This Post Helpful? 0
  • +
  • -

#5 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,524
  • Joined: 12-January 10

Re: Div with full page height, not window height

Posted 20 April 2020 - 11:55 AM

i noticed that you use 100vh -- that means view port size not html doc size
try: height = 100%;
Was This Post Helpful? 0
  • +
  • -

#6 doctor-f   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-April 20

Re: Div with full page height, not window height

Posted 20 April 2020 - 12:21 PM

View PostDarenR, on 20 April 2020 - 11:55 AM, said:

i noticed that you use 100vh -- that means view port size not html doc size
try: height = 100%;

Initially, I had "width: 100%" and the result was worse. With "min-width: 100%" or "min-width:10vh" I get better result.
The result with "width: 100%" is this in the image here: https://imgur.com/akUz5kg

I can't attach any image, as I get "Error The server returned an error during upload". I tried with png and jpg file, less than 80KB and the same error message poped up.


Something that I forgot to mention, I tried my code both locally and my online account with the same bad results.
Was This Post Helpful? 0
  • +
  • -

#7 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,524
  • Joined: 12-January 10

Re: Div with full page height, not window height

Posted 20 April 2020 - 12:32 PM

you said you were having issues with height.

when you have 2 divs next to each other they both cant be 100% width
i like to put my divs 1% less than max on width

so if i want 2 dives on a page at equal with, i sometimes put them 49% each
Was This Post Helpful? 0
  • +
  • -

#8 doctor-f   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-April 20

Re: Div with full page height, not window height

Posted 20 April 2020 - 12:41 PM

View PostDarenR, on 20 April 2020 - 12:32 PM, said:

you said you were having issues with height.

when you have 2 divs next to each other they both cant be 100% width
i like to put my divs 1% less than max on width

so if i want 2 dives on a page at equal with, i sometimes put them 49% each

OH no. I am an idiot. I wanted to write height, not width. Sorry!

View Postdoctor-f, on 20 April 2020 - 12:40 PM, said:

View PostDarenR, on 20 April 2020 - 12:32 PM, said:

you said you were having issues with height.

when you have 2 divs next to each other they both cant be 100% width
i like to put my divs 1% less than max on width

so if i want 2 dives on a page at equal with, i sometimes put them 49% each

OH no. I am an idiot. I wanted to write height, not width. Sorry!
can I edit my previous post?
Was This Post Helpful? 0
  • +
  • -

#9 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,524
  • Joined: 12-January 10

Re: Div with full page height, not window height

Posted 21 April 2020 - 06:33 AM

you dont have enough cred to edit yet
Was This Post Helpful? 0
  • +
  • -

#10 DarenR   User is offline

  • D.I.C Lover

Reputation: 705
  • View blog
  • Posts: 4,524
  • Joined: 12-January 10

Re: Div with full page height, not window height

Posted 21 April 2020 - 08:49 AM

then set the height to 100%
Was This Post Helpful? 0
  • +
  • -

#11 doctor-f   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 20-April 20

Re: Div with full page height, not window height

Posted 21 April 2020 - 09:04 AM

View PostDarenR, on 21 April 2020 - 08:49 AM, said:

then set the height to 100%
I have already written above that height:100%, that I used initially, has worse result than min-height that I have now. I have also posted image showing the result of it. See my post.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1