CSS: Position element at bottom of page (not visible window)_问答_开发者

CSS: Position element at bottom of page (not visible window)

开发者 https://www.devze.com 2023-03-26 15:49 出处：网络

http://jsfiddle.net/vol7ron/bKWtM/ <body> <div id=\"head\"></div> <div id=\"body\"></div>

相关专题：css

http://jsfiddle.net/vol7ron/bKWtM/

<body>
   <div id="head"></div>
   <div id="body"></div>
   <div id="foot"><开发者_C百科/div>
</body>

body   { padding:0;margin:0;}
#head  { position:absolute; height:20px; width:100%; background:#900; top:0;    }
#foot  { position:absolute; height:20px; width:100%; background:#090; bottom:0; }
#body  { position:absolute; top:0; z-index:2;}

// filler
for (var i=1,n=50;i<=n;i++){
   $('#body').append('<div>' + i + ' (filler) </div>');
}

What I'm trying to do is position the footer at the very bottom of the document, not the opening window. So the green bar would come after line 50 and not appear on the opening view.

I'm looking for the classic layout, where if there was no absolute positioning the header would be at the top, then the body, then you have to scroll to view the footer. The only difference is I want the body to overlap the header (hence absolute positioning).

Note:

I don't want the footer to have fixed positioning..
I don't want to use JavaScript

Any help would be appreciated.

You've made this unnecessarily complicated on yourself. If your only goal is to overlap the body with the header, then you can just use a negative margin. Then you can leave everything statically positioned.

Working example: http://jsfiddle.net/uaBpx/1/

Otherwise, there is no way I can think of to position something at the bottom of the document, because the document height in your example is actually 0px. Once you pull out all the content (via absolute positioning), there is no height.