Prevent content from hiding behind fixed position navigation bar

Question

I have a navigation bar with 40px height and I can't place my other content (just a textarea) below this bar. I tried to set margin-top:40px; to the textarea but it doesn' t work.

Then I used padding-top:40px which is ok for the content inside the textarea but as you will see has a problem with the scrollbar (it gets behind the bar).

Just take a look at this jsFiddle

Answer 1

向导航padding-bottom: 40px添加padding-bottom: 40px ，并将其从文本区域中删除。

Answer 2

use

postion:fixed;
and margin to push contents out

http://jsfiddle.net/4Y63u/3/

Answer 3

As an alternative to @Andrw Ice 's answer

You just have to give the textarea s margin something to push against.

JSfiddle Demo

This is common...as the advantage is that it doesn't cause any of the elements to moveif the navbar is hidden.

body {
    border:1px solid transparent;
}

nav + textarea{
    margin-top: 40px;
}