2

I have created a html and can be found http://temp87.web44.net/temp.html. Problem what i'm facing is there is a gray strip at the bottom of page after footer and the page is not occupying 100% of browser.

enter image description here

CSS which is causing the issue..

.clearfix:after {
    content: ".";   //If this is commented out the page fits in perfectly, but the background of <div>storyWrapper clearfix</div> goes off.
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

Problem 2: Also i want the height of

<div class="detailsContent"/>

to fit automatically according to the resolution of the screen. Right now computed height is always 619px and in large monitors the whole page occupies only 75% of the screen.

Thaddeus Albers
  • 4,094
  • 5
  • 32
  • 42
user1184100
  • 6,742
  • 29
  • 80
  • 121

1 Answers1

2

Remove "." from content. write like this:

.clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
sandeep
  • 91,313
  • 23
  • 137
  • 155
  • thank you sandeep it worked :) Also my page is occupying only half of the screen and in bigger resolutions it looks really odd..any help on this.. – user1184100 May 29 '12 at 04:48
  • For you can use sticky footer technique http://ryanfait.com/sticky-footer/ http://css-tricks.com/snippets/css/sticky-footer/ – sandeep May 29 '12 at 04:51
  • but i'm not using a sticky footer in this page but instead footer scroll's down with the page. – user1184100 May 29 '12 at 04:54
  • because you page height is not much. So,you can do two things First give body background the same color as footer or second you can use sticky footer technique. – sandeep May 29 '12 at 05:00