将高度100％设置为绝对div

Question

I have a sidebar menu:

HTML

<div class="container right-menu">
    <nav class="panel-nav">
        <ul>
            <li><a href="#about us">About us</a></li>
            <li><a href="#portfolio">Portfolio</a></li>
            <li><a href="#contacts">Contacts</a></li>
        </ul>
    </nav>
</div>

CSS

.right-menu {
    position: relative;
    height: 100%;
}
.panel-nav {
    position: absolute;
    right: 0;
    float: right;
    width: 195px;
    min-height: 100%;
    padding: 87px 0 0 21px;
    margin-right: -59px;
    background: #f6f6f3;
    box-shadow: inset 7px 0 5px -6px rgba(0, 0, 0, 0.1);
    font-size: 14px;
    z-index: 2;
}

I need to do to panel-nav was the full height of the page. But now, this div has a height equal to the height of the contents inside. How to fix it?

Answer 1

You can do that by simply changing height from 100% to 100vh of parent div:

.right-menu {
   position: relative;
   height: 100vh;
}

Jsfiddle: http://jsfiddle.net/rycpx4g2/

vh is a CSS3 measurement unit that stands for viewport height

Answer 2

You can set top: 0 and bottom: 0 at the absolute position element in order to achieve 100% height according to the relative positioned parent element:

.panel-nav {
   position: absolute;
   top: 0;
   bottom: 0;
}

EDIT

You can use jQuery and set a new top position to .panel-nav every time you scroll.

$(window).scroll(function() {
    var top = $(window).scrollTop();
    $('.panel-nav').css({'top': top + 'px'});
});

 #parent { position: relative; border: 1px solid #333; width: 200px; height: 300px; float: left; } #child { position: absolute; top: 0; bottom: 0; width: 100%; background-color: red; } 

 <div id="parent"> <div id="child"> <ul> <li>text</li> <li>text</li> <li>text</li> <li>text</li> </ul> </div> </div> 

Answer 3

See this fiddle: http://jsfiddle.net/Bek9L/1879/

HTML

<div class="container">
    <div class="sidebar">
        <p>This is a side bar</p>
    </div>
    <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean condimentum.</div>
</div>

CSS

html, body{
    width: 100%;
    margin:0;
    padding:0;
}
.container{
    border:1px solid red;
    position:relative;
}
.content{
    width:75%;
    margin-left:25%;
}
.sidebar{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:25%;
    height:100%;
    background:gray;
}

Answer 4

Here problem is with height, to solve it add height of html and body to 100%

ie

html,body{
        height:100%;
         padding:0;
          margin:0;
    }

jsfiddle http://jsfiddle.net/swapnilmotewar/03mjryjw/1/

Answer 5

When using position: absolute; you won't be setting height values.

You should be using top: 0, bottom: 0; to achieve a 100% height.

If you want to make sure that this does not change when the window is scrolled, use position: fixed;

Answer 6

Use this way very easy Step 1 make a hole div and put a content using padding-right only step 2 inside make a one more div set a position:fixed; and also set a height and color

check a code and easy to do this enter code here http://jsfiddle.net/simeon1929/h3sqe9re/15/