5 replies to this topic

[shism]

Currently, I am using javascript to add padding to "page-main" when it calculates the height of "header". However, since it has to wait for the document to be "ready" it causes a delay in which the page doesn't correct itself until it's "ready".  The question is then:

 

Can I use CSS or change something in the framework to achieve this same layout where "page-main" scrolls under "header"?

 

or

 

Is there a way to calculate the height of "header" sooner? When I try to wait for the "load" event then nothing works at all for some reason.

 

[James B]

Hi there, yes you can use css to add padding to the header or any other element on the site. You could also set the heading position to fixed using css. An example is below, to find out more on css and how to apply in the framework check out -

Please Login or Register to see this Hidden Content

 

Please Login or Register to see this Hidden Content

[shism]

The thing is I already have the header fixed. What I am trying to achieve is to have "page-main" completely visible. 

 

The current solution I have is :

 

1. Set #header to fixed

2. Calculate height of header on "ready" event.

3. Adding padding  to #page-main that is about equal to the height of #header

 

Is their anyway to achieve this type of layout without javascript?

 

Is there a way to do this using LESS?

[Danny]

I don't actually know what you're trying to achieve, why use javascript to calculate your headers height ?

[shism]

I am trying to have #page-main be completely visible &  scroll under the header even if the window is resized.

[beardedavenger]

If you position:fixed and top:0 your header, the rest of the page will scroll under automatically.