The answer is
100% height refers to the height of the parent container. In order for your div to go full height of the body you have to set this:
html, body {height: 100%; min-height: 100%}
Hope it helps.
<!DOCTYPE html>
<html>
<title>Welcome</title>
<style type="text/css">
.head1 {
width:300px;
border-right:1px solid #333;
float:left;
height:500px;
}
.head2 {
float:left;
padding-left:100PX;
padding-top:10PX;
}
</style>
<body>
<h1 class="head1">Ramya</h1>
<h2 class="head2">Reddy</h2>
</body>
</html>
Use an absolutely positioned pseudo element:
ul:after {
content: '';
width: 0;
height: 100%;
position: absolute;
border: 1px solid black;
top: 0;
left: 100px;
}
There are at least two ways to solve this.
Solution 1:
If you are okay with using an absolutely positioned element, you can use the top and bottom properties instead of height. By setting both top and bottom to 0 you force the element into taking up full height.
#menu
{
position: absolute;
border-right: 1px solid black;
top: 0;
bottom: 0;
}?
Solution 2:
Another way would be to force the HTML and BODY elements into a 100% height, to give room for a menu with 100% height:
body, html { height: 100%; }
#menu
{
border-right: 1px solid black;
height: 100%;
}?
When I tested this, I tried using the position property and it worked perfectly.
HTML
<div class="main">
<div class="body">
//add content here
</body>
</div>
CSS
.main{
position: relative;
}
.body{
position: absolute;
height: 100%;
}
I've used min-height: 100vh; with great success on some of my projects. See example.
I use this css positioning for most of my vertical elements:
<div class="vertical-line" style="height: 250px;
width: 1px;
background-color: #81F781;
margin-left: 0px;
margin-top: -100px;
postion: absolute;
border-radius: 2px;">
</div>
Change the height and width to fit the page, or to make a horizontal line swap the height to width:
<div class="vertical-line" style="height: 250px;
width: 1px;
<div class="vertical-line" style="width: 250px;
height: 1px;
instead of a standard html line.
Source: Stackoverflow.com