nicht angemeldet
3 Divs; gesamt 100% header u. footer pixelangaben?
Es soll 3 Divs geben, einen header, einen footer und einen contentbereich. Für Header und Footer möchte ich feste Pixelangaben machen, der content soll sich die Resthöhe nehmen.
Hier ist mein Ansatz:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Höhe</title>
<style type="text/css">
body, html {
margin: 0 auto;
padding: 0;
overflow: auto;
width: 100%;
height: 100%;
}
body {
background-color: #232323;
}
#frame {
outline: none;
overflow: auto;
height: 100%;
}
#header {
background-color:red;
height: 25px;
}
#content {
background-color:yellow;
height: 100%;
}
#footer {
background-color:orange;
height: 50px;
}
</style>
</head>
<body>
<div id="frame">
<div id="header">das ist der header; er muss immer 25 pixel hoch sein!</div>
<div id="content">das ist der content; er soll sich die resthöhe holen!</div>
<div id="footer">das ist der footer; er muss immer 50 pixel hoch sein!</div>
</div>
</body>
</html>
-
-
Hallo,
das ist das Beispiel, das Du brauchst:
http://inix.in.funpic.de/stfooter.htmlich denke nicht, daß es hilft:
- höhe ist größer 100% und so erscheint permanent ein Scrollbar
- sollte content so groß werden, daß es in den Bereich footer reicht überlagern sich content und footer
bydey
--
-- bydey ist die Signatur und Verabschiedung, nicht der Nick --
-- Navigate all your PHP web projects with PHP Project Browser---
Hallo,
das ist das Beispiel, das Du brauchst:
http://inix.in.funpic.de/stfooter.html
ich denke nicht, daß es hilft:- höhe ist größer 100% und so erscheint permanent ein Scrollbar
- sollte content so groß werden, daß es in den Bereich footer reicht überlagern sich content und footer
doch, das Beispiel ist gut ;), es gibt da scrollbar denn ich habs borders gelegt und man kann auch ja selber paddings/margins ect kleiner/grosser machen wo es noetig ist. Im content kann man zB background so legen, dass es bis zum footer-border geht. Nur muss man bissel auch selber denken. Also, fuer sticky footer hab ich noch nicht ein besseres beispiel gesehen im ganzem Netz. Es gibt andere Beispiele, aber dann funzt die net in allen Browsern.
LG,
Inita
-
Danke, aber da erscheint beim mir im FF immer ein Scrollbalken.....das will ich nicht.
hoi,
das ist das Beispiel, das Du brauchst:
http://inix.in.funpic.de/stfooter.html
LG,
Inita-
Danke, aber da erscheint beim mir im FF immer ein Scrollbalken.....das will ich nicht.
#page{
border:1px solid;
}nimm border weg in #page, dann hast wohl keine scrollbalken mehr!!!!
Inita
-
Doch im FF schon..... :)
Danke, aber da erscheint beim mir im FF immer ein Scrollbalken.....das will ich nicht.
#page{
border:1px solid;
}nimm border weg in #page, dann hast wohl keine scrollbalken mehr!!!!
-
-
-
-
So geht das:
Quelle:
http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htm<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><head>
<title>Home</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="author" content="The Man in Blue" />
<meta name="robots" content="all" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" /><style type="text/css" media="all">
@import "css/main.css";
@import "css/product_features.css";/* The CSS that's required to position the footer */
html
{
height: 100%;
}body
{
height: 100%;
}#nonFooter
{
position: relative;
min-height: 100%;
}* html #nonFooter
{
height: 100%;
}#footer
{
position: relative;
margin: -7.5em auto 0 auto;
}/* A CSS hack that only applies to IE -- specifies a different height for the footer */
* html #footer
{
margin-top: -7.4em;
}</style>
</head>
<body>
<p class="hidden">
<a href="#content">Skip to content</a>
</p><div id="page">
<div id="nonFooter">
<div id="header">
<p id="logo">
<span class="replacement"></span><a href="#"><span class="replacement"></span><span class="linkText">XXXX</span></a></p>
<ul id="menu">
<li id="menuSupport" ><span class="replacement"></span><a href="#" title="Support and documentation"><span class="replacement"></span><span class="linkText">Support</span></a>
</li>
<li id="menuAbout" >
<span class="replacement"></span><a href="#" title="About"><span class="replacement"></span><span class="linkText">About</span></a>
</li>
</ul>
</div>
<!-- END header --><div id="content">
<div id="contentMain">
<h1 id="headingFeaturesPages">
<span class="featureIcon"></span>Product X <span class="hidden">–</span> <span class="subTitle">Features: Pages</span>
</h1>
</div>
<!-- END contentMain -->
<div id="contentSub"><ul id="quickLinks">
<li class="first on">
<a href="#"><span>Feature</span> tour</a>
</li>
<li>
<a href="#"><span>Try</span> a demo</a></li>
<li>
<a href="#"><span>Buy</span> online</a>
</li>
</ul>
</div>
<!-- END contentSub -->
<div class="clearer"></div>
</div>
<!-- END content -->
</div>
<!-- END nonFooter -->
</div>
<!-- END page -->
<div id="footer">
<ul id="bottomLinks">
<li class="first"><a href="#">Support</a>
</li>
<li>
<a href="#">Employment</a>
</li>
<li>
<a href="#">Contact Us</a></li>
</ul>
<p>
© 2005 XXXX. All rights reserved.
</p>
</div>
<!-- END footer -->
</body></html>
-
So geht das:
Quelle:
http://www.themaninblue.com/experiment/footerStickAlt/good_example_short.htmNa, viel spass mit deinem Beispiel ;)
P.S. wenn man schreibt an #page border:1px solid, kommt die selbene scrollbalken.
..ich finde sowieso mein Bsp einfacher ;)
LG,
Inita
-