1

I have single page site where 1st part main part which should be 100% of the viewers screen/browser size and the 2nd part should be below the viewing area, so when a user clicks on a link , the page gets scrolled down to the second part .

how do i achieve this., i have tried this so far, but its not setting min-height yo 100%

HTML:

<div class="container">
<div class="firsthalf">
this is the first part of the site
<a href="#help"> <i class="fa fa-question-circle fa-lg"></i>
<div class="notice">this is aligned to bottom of first half
</div></div>   
</div>    

<div class="container">
<div id="help" class="secondhalf">
<div class="col-md-8 col-md-offset-2">
<div class="well">
we are in second part of the site
</div>
<a href="#top" class="btn btn-default"><i class="fa fa-arrow-up "></i> Top</a>
</div>
</div>
</div>

CSS:

body, html {
  height: 100%;
}
.firsthalf{
height:100%;
}
.notice{
margin-bottom:0%;
padding-bottom:5px;
}
.secondhalf{
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
min-height:50%;

}

http://jsfiddle.net/4yk2q/

2 Answers 2

2

Play with position: relative; and position: absolute;... they are your friend in this case...

Solution demo

body, html {
    height: 100%;
}
.container {
    height:100%;   /* first make container full height */
}
.firsthalf {
    height:100%;
    border:1px solid #000;
    position: relative; /* make parent div relative */
}
.notice {
   padding-bottom:5px;
   position: absolute; /* this does the base line trick */
   bottom: 0;
   right: 0;
}
6
  • thanks , this is best, i was thinking about setting display:table
    – user1642018
    Jan 7, 2014 at 10:15
  • display:table is good but every css is good in certain markup layouts only...position is best suited and more cleaner in your case!! :)
    – NoobEditor
    Jan 7, 2014 at 10:16
  • thanks , it tells me to wait 2 minutes, to accept answer, i guess icant accept answer instantly after creating question.,
    – user1642018
    Jan 7, 2014 at 10:18
  • lol...u got ur answer within 2 minutes of u posting question...wish i might be that lucky....happy new year mate!! :D
    – NoobEditor
    Jan 7, 2014 at 10:20
  • happy new year to you 2 :) why the lower box not in the same width and notice txt cant be centered ? any idea ? jsfiddle.net/4yk2q/2
    – user1642018
    Jan 7, 2014 at 10:21
1

viewport height (vh) You are looking for height:50vh; or height: 100vh;

There are a few options you may find useful:

vh (viewport height) vw (viewport width) vmin (viewport minimum length) vmax (viewport maximum length)

http://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/

.secondhalf{
margin-top:25%;
margin-bottom:50%;
padding-top:25px;
height:50vh;

}

Edit: make sure it is supported by the browsers you need to support. http://caniuse.com/#feat=viewport-units

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.