Vertically middle postion between sticky header and sticky footer

HTML & CSS
1

I have a page at http://dot.kr/joon/205menu/menu/.
The page has the centerBox in GREEN at the position of vertically middle and horizontally center of the browser.

I like to put the centerBox in GREEN at the position of vertically middle between the sticky header in RED and the sticky footer in YELLOW.

How can I put it at the position of vertically middle between the sticky header in RED and the sticky footer in YELLOW instead of the position of vertically middle of the browser?

2

because the header and footer are sticky ( absolutely positioned) they do not figure into the flow ( in another words, their dimensions are not calculated into anything). for you to achieve what you want you will need to do the math manually.

to the style of the green box, recalculate the vertical position + ( (1/2 height of the header-1/2 height of the footer).

Hope that helps

3

Hello, I am zilong from Korea.
(I was born in China but am working in Korea at the moment with dotJoon who is a member of this forum.)
My English is really very poor.
For the time being. dotJoon will help me in English.
Actually he already helped me in some posts using his name.

I like to post in my name now.

I have a webPage at http://dot.kr/joon/206big/.

I like to put the centerBox in yellow backgound to the vertically middle position
between the sticky header and the sticky footer

Although dotJoon is helping me in English for this posting, I like to post with my English next time or later.
I hope you help me.
Thank you very much in Advance.

4

Hi zilong, welcome to the forums,

Might be a temporary thing, but that page won’t open for me (times out). Are you sure it’s correct and live?

5

HI,

I think we covered this before with dotjoon :slight_smile:

Use display table and table-cell (ie8+) when you need vertical centering.

Add this extra code.


.p-tb60 {
	display:table;
	width:100%;
	height:100%;
}
.tc {
	display:table-cell;
	vertical-align:middle;
}

Then add an inner div here:


<div class="p-tb60 ovfAuto">
		<div class="tc">
				<div class="bdr5 YELLOW mgnAuto wiP40 alnL bdr-r10 pdg10">centerBox<br>
						centerBox<br>
				</div>
		</div>
</div>

A div with a class of .tc was added/

6

Hi, Mr.Paul.
You gave me the method. I made it at the page http://dot.kr/joon/208exit/index.php which is the applying your help of http://dot.kr/joon/206big/index.php.

But the upper part of the yellow centerBox is hidden by the sticky header instead vertically middle aligned between the sticky header and the sticky footer.
What’s wrong in my code at http://dot.kr/joon/208exit/index.php?

7

Hi,

You left out the top and bottom padding that you had in your other design which is needed to keep the content away from your fixed header and footer. You also missed out the html and body 100% rules to enable the table to be 100% tall.


p-tb60{
padding:60px 0;
}

html,body{height:100%}
8