CODEWITHSUNDEEP
csspositionfixed
user4008903
user4008903

Reputation: 41

How can I make a div 100% height fixed?

I want to a div with 100% height but fixed position like right side of this website: http://www.dast2.com

I know these are required: height:100%; position:fixed;

but it doesn't work for me.

Upvotes: 4

Views: 45266

Answers (8)

Trần Hữu Hiền
Trần Hữu Hiền

Reputation: 1044

Using vh:

Viewport Height (vh). This unit is based on the height of the viewport. A value of 1vh is equal to 1% of the viewport height.

height: 100vh;

Upvotes: 2

Hasan Zahran
Hasan Zahran

Reputation: 1442

I think one of the container take max-width, check the all the container in youI think one of the container takes a property of max-width, check the container that holds the div.

Upvotes: 0

Aras
Aras

Reputation: 1597

.bg-container{ 
  position: fixed;
  width: 100%;
  height: 100%; 
}

Upvotes: -1

joergipoergi
joergipoergi

Reputation: 349

Old but here it goes:

div#sidebar {
   position: fixed;
   top: 0px;
   bottom: 0px
}

Upvotes: 5

gdyrrahitis
gdyrrahitis

Reputation: 5958

Browsers dont calculate height so well. height: auto means 'get the same height as your content'. But height: 100% doesn't always plays well, because the content of an element defines its height. So the body height is defined by its content. So when you instruct your content to have height: 100%, you instruct it to have the same height as the body, but the body is the same height as the content, so you instruct it to be as tall as itself.

You must provide height to body and html ( root element ).

In this case, I made a demo, which I provided the html element a ridiculus height: 10000px.

For the sidebar ( the one with the red color ) the only property you need is the min-height: 100% property. The sidebar will take all of its vertical space as you can see in the demo below. Just added position: fixed; and right:0 to make it fixed at the right.

Here is the demo

Quick Note: If you ever want to have the same effect on live site, just inspect the page with the developer tools and grab the css/markup that fit your needs.

Cheers!

Upvotes: 1

Suchit kumar
Suchit kumar

Reputation: 11859

try this:

<body>

  <div id="sidebar">

  </div>

</body>
<style>

div#sidebar {
  position: fixed;
  background-color : #00FF00;
  height: 100%;
  width: 300px;
  overflow: hidden;
}

</style>

here is live demo

Upvotes: 3

Zeth
Zeth

Reputation: 2578

You need to have 'Display: block', for it to work.

THE HTML:

<body>
  <div class="container">
    <div class="content">
      <p>Top bit</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Some content</p>
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <br /><br /><br /><br /><br /><br /><br />
      <p>Bottom bit</p>
    </div>
    <div class="fullHeight sidebar">
      <h1>Sticky sidebar</h1>
    </div>
  </div>
</body>

THE CSS:

.container   {width: 1000px; margin: 0 auto; overflow: hidden; position: relative;}
.content     {width: 690; float: left; position: relative;}
.fullHeight  {height: 100%; display: block; overflow: hidden; position: fixed; width: 300px; background: red; right: 0; top: 0;}

I made the background red, so you could copy that code in, to see if it worked. I must admit, that I haven't tested it; but I'm fairly sure that that does the trick. Let me know if it doesn't work; then I'll test it and fix it.

And remember to have 'Position: relative;' on the element that the fixed element inside - so it 'knows' what it should be fixed relative to. If it's not inside a container or anything (like mine is above), then you can put 'Position: relative;' on the body-tag; like so:

body  {position: relative;}

Upvotes: -1

himanshu
himanshu

Reputation: 1797

html, body{height:100%;}

follow this and give 100% to the div

Upvotes: 0

Related Questions