Div auf 100% höhe und XYZ px wieder abziehen
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
absolute nehmen
ansicht
ansprechen
auto
beispiel
code
eigenschaft
expression
forum
geheimnis
http
idee
index
info
position
programm
tag
total vergessen
tun
url
-
Hallo Leute
Ich möchte eine Homepage machen, die ein tag/programm">Programm imitiert, und das soll natürlich auch wie ein Programm von der Oberfläche her sein.
Ich habe oben ein Div, das ist 116px HOCH und 100% BREIT.
Darunter habe ich ein Div, das SOLL 100% HOCH sein und dann aber die Höhe des ersten Divs wieder abgezogen werden...
Damit ihr euch das Layout vorstellen könnt, seht euch mal office 2007 an, das soll nämlich später genau so aussehen.... also da wo dann Bearbeiten, Ansicht und sowas steht, das soll immer zu sehen sein und darunter das DIV soll halt ne Scrollbar haben.... aber die ganze Seite an sich soll KEINE Scrollbar haben. Ich rätsel hier schon 2 Tage rum... Ich hätte das ganze gerne im reihnem CSS, damit wenichstens etwas später zu sehen ist, weil der Großteil später nur noch JS sein wird... Programm halt... alles mit AJAX.
Würde mich freuen, wenn mir jemand helfen kann
Gruß
technofan -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Das müsste mit "position:fixed" gehn. Info
Eine Beispiel-Seite, wo man das so umgesetzt hat. Da scrollt zwar alles, bin mir nicht sicher, ob das dir ausreicht?! -
werktags schrieb:
Das müsste mit "position:fixed" gehn. Info
Eine Beispiel-Seite, wo man das so umgesetzt hat. Da scrollt zwar alles, bin mir nicht sicher, ob das dir ausreicht?!
Das kommt dem schon nahe.... aber es soll nicht alles scrollen, sondern nur der untere Div... -
Hier mal ein Beispiel CSS:
#div-oben { position:fixed; top:0px; left:0px; right:0px; height:100px; } #div-unten { position:fixed; top:100px; left:0px; right:0px; bottom:0px; overflow:auto; } -
thomasba schrieb:
Hier mal ein Beispiel CSS:
#div-oben { position:fixed; top:0px; left:0px; right:0px; height:100px; } #div-unten { position:fixed; top:100px; left:0px; right:0px; bottom:0px; overflow:auto; }
Hmm, joa... auf die Idee hätte ich jetzt aber auch kommen können... vielen Dank auch ^^
hab das mit Fixed total vergessen ^^
Aber das klappt im IE6 net...
Beitrag zuletzt geändert: 1.8.2009 15:35:36 von technofan -
technofan schrieb: Hmm, joa... auf die Idee hätte ich jetzt aber auch kommen können... vielen Dank auch ^^
hab das mit Fixed total vergessen ^^
Aber das klappt im IE6 net...
Hmpf.. ich war zu langsam:
Der IE6 versteht fixed nicht. Da gibt es keine gute Lösung. Du könntest statt fixed absolute nehmen. Das sieht dann aber doof aus! -
Dafür kann aber IE im CSS rechnen mit "calc", also etwa
height: calc(100% - 40px)
Ich bin mir aber nicht sicher ab welcher IE-Version das geht. -
werktags schrieb:
technofan schrieb: Hmm, joa... auf die Idee hätte ich jetzt aber auch kommen können... vielen Dank auch ^^
hab das mit Fixed total vergessen ^^
Aber das klappt im IE6 net...
Hmpf.. ich war zu langsam:
Der IE6 versteht fixed nicht. Da gibt es keine gute Lösung. Du könntest statt fixed absolute nehmen. Das sieht dann aber doof aus!
vor allem verschwindet ja dann auch der Scrollbalken weiter unten etwas... soll ja auch net sein...
ich muss das ganze leider bis zum IE6 anpassen.... gibt's da net noch ne JS lösung??? -
Bitte kein JS.
Seh mal auf cssplay oder nutze Google. Es gibt IE 6 Hacks, bei deinen man mit position: absolut zu fixed macht.
* html { overflow-y: hidden; } * html body { height: 100%; overflow: auto; }
Wenn du willst, dass das ganze auch in IE < 6 geht, dann musst du noch ein extra div einfügen, dass alles umschließt und dem body dann das owerflow-y geben und dem div das height und overflow auto. Aber dir gehts ja nur um 6. -
nikic schrieb:
Bitte kein JS.
Seh mal auf cssplay oder nutze Google. Es gibt IE 6 Hacks, bei deinen man mit position: absolut zu fixed macht.
* html { overflow-y: hidden; } * html body { height: 100%; overflow: auto; }
Wenn du willst, dass das ganze auch in IE < 6 geht, dann musst du noch ein extra div einfügen, dass alles umschließt und dem body dann das owerflow-y geben und dem div das height und overflow auto. Aber dir gehts ja nur um 6.
ich habe da noch was viel besseres gefunden... mein ganzes CSS dafür sieht jetzt so aus:
.chapterline { height: 23px; width: 100%; background-image: url(images/dl.png); float: left; position: absolute; padding-left: 20px; } .funktionline-m { background-image: url(images/mlm.png); height: 93px; width: 100%; top: 23px; float: left; position: absolute; } .funktionline-l { background-image: url(images/mll.png); height: 93px; width: 100%; background-repeat: no-repeat; float: left; } .funktionline-r { background-image: url(images/mlr.png); background-repeat: no-repeat; background-position: right top; height: 93px; width: 100%; float: left; } .content { background-image: url(images/background.png); background-repeat: no-repeat; width: 100%; float: left; margin: auto; position: absolute; top: 116px; bottom: 21px; height: expression((document.body.clientHeight - 137) + "px"); } .contentaction { width: 100%; overflow: auto; float: left; margin: auto; position: absolute; top: 116px; bottom: 21px; height: expression((document.body.clientHeight - 137) + "px");} .footer { height: 21px; width: 100%; position: absolute; bottom: 0px; background-image: url(images/footer.png); }
das entscheidene ist das hier:
height: expression((document.body.clientHeight - 137) + "px");}
eine Art JavaScript für CSS... funktioniert bestens und ist Valid
ich habs so geschafft die Seite bis IE5 valid zu machen mit nur einem Stylesheet ^^
gut wa? :P
darüber hinaus hab ich dem IE6 und kleiner beigebracht, wie er hover auch auf andere Objekte anwenden soll... das geht so:
<!--[if IE]> <style type="text/css" media="screen"> </style> <![endif]--> <!--[if lt IE 7]> <style type="text/css" media="screen"> body {behavior: url(csshover.htc); font-size: 100%;} #menu ul li a {height: 1%;} } </style> <![endif]-->
das Geheimnis liegt in der csshover.htc
*.htc sind HTML- bzw. CSS-Klassen die Eigenschaften festlegen... joa... angehangen und fertig, jetzt mach ich Pseudoklassen auch im IE5 schon XD -
height: expression((document.body.clientHeight - 137) + "px");
Du willst mir nicht wirklich erzählen, dass du das validiert hast und der gesagt hat es ist valide. Das willst du mir nicht erzählen... -
nikic schrieb:
height: expression((document.body.clientHeight - 137) + "px");
Du willst mir nicht wirklich erzählen, dass du das validiert hast und der gesagt hat es ist valide. Das willst du mir nicht erzählen...
doch, genau das... Validome und W3C meckern mich net an. -
expression ist MS-IE-proprietär und haben mit W3C nichts zu tun.
-
census schrieb:
expression ist MS-IE-proprietär und haben mit W3C nichts zu tun.
Na ja, is ja egal, meckern trozdem beide nicht ^^
Aber ich hab ein Problem mit meiner *.htc ...
das ganze hab ich auf index eingebunden und alle divs die auf dem index jetzt ein hover haben, sind ok... jetzt arbeite ich aber mit AJAX und das klappt dann bei den via Ajax geladenen Seiten nicht, weil auf denen kein JS ausgeführt wird... man kanns da nur ansprechen... aber das geht auch nicht immer, da braucht man nen kleinen Trick... -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
