Hallo Zusammen,
ich möchte in folgendem Layout den Footer so fixieren, dass er immer im Screen zu sehen ist.
Der Contentbereich jedoch soll scrollbar sein.
Wie ist dies mit CSS machbar?
Ich habe schon verschiedenes ( position: fixed; etc. ) ausprobiert, aber es hat bisher nicht geklappt.
Im IE 6 drückt der lange Text im Content den Footer nach unten. Im Firefox, wird der Contenttext sogar in den Footerbereich hineingeschrieben.
Vielen Dank für Eure Tips und Hinweise!
ich möchte in folgendem Layout den Footer so fixieren, dass er immer im Screen zu sehen ist.
Der Contentbereich jedoch soll scrollbar sein.
Wie ist dies mit CSS machbar?
Ich habe schon verschiedenes ( position: fixed; etc. ) ausprobiert, aber es hat bisher nicht geklappt.
Im IE 6 drückt der lange Text im Content den Footer nach unten. Im Firefox, wird der Contenttext sogar in den Footerbereich hineingeschrieben.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
*{ margin: 0;
padding: 0; }
html,body { margin:0;
padding:0;
height:100%;
font-family: sans-serif;
/* font-family: Arial, Verdana, Helvetica; */}
#header { height: 15%;
border-width: 1px;
border-style: solid;
border-color: black;
}
#menuleiste { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black; }
#right { width: 25%;
height: 75%;
border-width: 1px;
border-style: solid;
border-color: black;
float: right;
margin-left: 0;
margin-left:-3px; }
#content { height: 75%;
border-width: 1px;
border-style: solid;
border-color: black; }
#footer { height: 5%;
border-width: 1px;
border-style: solid;
border-color: black; }
</style>
</head>
<body>
<div id="header"> </div>
<div id="menuleiste"> </div>
<div id="right"> </div>
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. In malesuada porta urna. Etiam lacinia, tortor sed placerat venenatis, ipsum purus egestas augue, ut vehicula diam elit in sapien. Aenean posuere interdum arcu. Nullam molestie molestie sapien. Praesent vitae leo. Integer tellus. Praesent mollis sem ultrices risus aliquam tristique. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ultrices leo sit amet justo. Vestibulum enim purus, lobortis vitae, dapibus vel, lobortis ac, dui. Nam nisi. Fusce cursus tincidunt diam. Donec ac risus ac lacus rhoncus dignissim. Vestibulum velit. Etiam tempus aliquet magna. Sed elementum.
Pellentesque fringilla massa at ligula. Etiam viverra, felis vel auctor facilisis, odio eros consectetuer ligula, in aliquam augue ligula eget enim. Ut ut nibh non massa fermentum euismod. Nam facilisis. Ut a velit non augue ultricies aliquet. In nunc nisl, feugiat sit amet, pellentesque sit amet, pretium quis, orci. Pellentesque vulputate, est ac vulputate porta, tellus orci accumsan magna, ac tristique est eros sed nisi. Cras consectetuer. Suspendisse potenti. Donec vulputate ultricies justo. Vivamus congue mi.
Fusce nisl. Quisque pretium ultricies magna. Phasellus sed diam. Nunc lacus nibh, lobortis vitae, condimentum at, lacinia id, diam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse potenti. Vivamus lectus risus, hendrerit ac, consequat vel, placerat dignissim, turpis. Aenean consequat elit eu dolor. In sodales, sem vel rutrum pellentesque, dolor nisi imperdiet mauris, eget blandit tellus quam quis nisi. Donec justo augue, pulvinar accumsan, tempus sed, semper quis, ipsum. In hac habitasse platea dictumst. Duis nonummy felis et nisi. Nunc consequat mi vitae leo. Quisque at mauris vel odio posuere sollicitudin.
Pellentesque tincidunt ipsum quis nulla. Quisque ornare mi sit amet urna. Nullam posuere urna sed magna. Duis pulvinar odio non magna. Duis pulvinar diam quis dui. Nam et risus. Maecenas ut mi. Praesent sit amet enim at tortor blandit fermentum. Vivamus facilisis lectus a lectus. Cras varius metus. Donec elit metus, tempus a, adipiscing nec, mollis sed, nunc. Morbi porttitor vestibulum leo. Proin ut tellus.
Mauris felis. Proin sollicitudin lorem in massa. Aliquam eu justo eu metus bibendum elementum. Proin molestie laoreet lacus. Donec quam felis, feugiat mattis, elementum a, laoreet vel, mauris. Phasellus iaculis mollis risus. Aenean vitae felis a arcu ultricies placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam consequat, eros non porttitor condimentum, nulla justo malesuada mauris, ut consectetuer sem diam pulvinar massa. Morbi imperdiet nulla ac nibh. Maecenas in pede non orci tristique sodales. Proin semper, magna in eleifend pellentesque, purus mi pellentesque nibh, in vestibulum nunc mauris sit amet orci. Nam ut lacus. Phasellus suscipit interdum lacus. Nulla facilisi. Donec ut augue ac mi molestie tristique. Cras tortor. Proin nibh. Proin ornare lorem at magna.
Aenean at orci. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin quis lectus in nunc ultrices volutpat. Aenean turpis turpis, consectetuer quis, aliquam eu, interdum id, nibh. Nulla tempus scelerisque eros. Phasellus gravida ante nec ante. Aliquam rutrum venenatis leo. Cras turpis lacus, tempus sit amet, suscipit vel, fringilla ac, ipsum. Suspendisse potenti. Nulla eros. Ut lacus felis, lobortis sed, mollis vel, feugiat eu, enim. Maecenas est risus, vehicula at, elementum ut, bibendum id, leo. Vestibulum nec libero.
Phasellus nisi. Phasellus velit nisi, consequat vel, bibendum sit amet, tristique nec, diam. Nulla sit amet ante sed nisl ullamcorper ullamcorper. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent pulvinar gravida velit. Sed metus arcu, commodo eu, euismod sed, facilisis sed, odio. Nulla faucibus tincidunt risus. Nulla adipiscing. Nullam laoreet tortor ac augue. Nulla urna. Quisque blandit tortor a massa. Sed odio urna, egestas eleifend, imperdiet nec, consectetuer id, augue. Vestibulum pretium.
Nunc eros sapien, tristique nec, aliquet eget, scelerisque nec, eros. In a sem at neque nonummy nonummy. Nam in nisi. Suspendisse vulputate, pede eget semper blandit, quam magna varius lacus, ac laoreet nisl nisl sit amet massa. Etiam tortor velit, viverra eu, dictum nec, gravida ut, dui. Cras semper tempor dui. Etiam enim purus, volutpat vitae, dignissim et, commodo nec, nunc. In posuere. Aliquam erat volutpat. Curabitur nec dui a dolor adipiscing rhoncus. Nunc at eros sit amet erat aliquet semper. Fusce laoreet velit ut velit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec pretium interdum nunc.
Proin convallis. Nunc ipsum odio, varius quis, consequat sed, blandit vitae, nunc. Vestibulum vulputate. Donec vel elit et magna sodales pretium. Sed ultrices, eros ac viverra fringilla, justo leo dapibus metus, non dapibus arcu tellus rutrum ipsum. Vivamus mattis laoreet diam. Aenean non leo ut lorem congue lacinia. Ut ullamcorper. Curabitur turpis. Curabitur ante. Sed nonummy mauris mollis risus. Nulla scelerisque lacus vitae ligula. Duis nulla dui, consectetuer vitae, faucibus ac, consectetuer eget, nisl.
</div>
<div id="footer"> </div>
</body>
</html>
Vielen Dank für Eure Tips und Hinweise!