Autor |
Nachricht |
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 15:15
Titel CSS: 2 Divs - Fensterhöhe und Scrollbar |
|
|
Hallo.
Hab folgendes Problem: eine Div Box die sich an die Fensterbreite anpasst.
Die zweite Div Box befindet sich in der eben genannten und enthält Text, der länger als die Fensterhöhe ist bzw sein kann.
Die zweite Box soll nun immer nen Abstand zum oberen und unteren Fensterrand haben. Also margin... (padding geht nicht da Scrollbalken nicht an Fensterkanten sein sollen).
Naja und ist der Text länger, als die zweite Box, dann soll in der zweiten Box ein Scrollbalken erscheinen(vertikal und horizontal).
Hmm hoffe mal ihr versteh was ich meine... Margin-top und Margin-bottom zeigen in Opera, FF, IE(6.x) keine Wirkung, was wohl daran liegt, dass die erste Box height:100% hat, oder?
Verzweifle langsam daran...
Heut Abend kann ich ja noch ne Skizze reinstellen falls keiner versteht was ich meine
Ja schönen Abend noch und danke schonmal für eure Mühen!
123456
|
|
|
|
|
EnterYourName
Dabei seit: 14.06.2007
Ort: Hamburg
Alter: 36
Geschlecht:
|
Verfasst Di 09.10.2007 17:32
Titel
|
|
|
Hatse mal probiert beim inneren div einfach overflow:auto anzugeben?
|
|
|
|
|
Anzeige
|
|
|
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 18:33
Titel
|
|
|
hmm also hab noch bissl dran rugmedallt und hab gemerkt dass ich zu kompliziert gedacht habe (scheinbar)
problem ist im prinzip, dass ich nich weiß, wie ich die grüne contentbox so hinbekomm, dass sie sich in der höhe der fensterhöhe anpasst, aber trotzdem oben und unten (auf unten könnte ich noch verzichten...) noch header und footer dazwischen sind.
momentan hab ichs so, dass header und footer einfach drüber liegen, gefällt mir aber nicht wirklich. naja und links bei der navi ist genau das selbe problem. navi hat feste größe, daneben setzt content an und passt sich der breite des fensters an. vielleicht hat ja jemand ne idee... (glaub die rote box: im bild box1 kann man weglassen, oder?)
danke
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 20:12
Titel
|
|
|
http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel5.htm
Für moderne Browser könnte das ganze auch so aussehen:
Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Fixed Header and Footer</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
#content {
background: #eee;
position: absolute;
top: 50px;
bottom: 50px;
width: 100%;
overflow: auto;
}
#foot {
position: absolute;
bottom: 0;
}
</style>
</head>
<body>
<div id="head">head</div>
<div id="content">
content
</div>
<div id="foot">foot</div>
</body>
</html> |
|
|
|
|
|
123456
Threadersteller
Dabei seit: 15.01.2006
Ort: Dresden
Alter: -
Geschlecht:
|
Verfasst Di 09.10.2007 21:45
Titel
|
|
|
danke, aber genau diese Lösung gefällt mir garnicht... hab ich nämlich momentan. ok im header und footer kriegt man das noch einigermaßen hin, aber links mit der navigation wird das nix, denn bei schmalerer fenstergröße sieht das ganze dann total bescheiden aus.
beispiel hier: http://aktuell.de.selfhtml.org/artikel/css/footer/beispiel6.htm
hab da fürn content eine min-width reingebracht. wenn man dann horiz. scrollen muss, sieht man dass des ganze so zusammengefriemelt ist und das geht garnich...
also steht folgendes problem momentan im vordergrund: links navi fest positioniert und feste breite. rechts daneben content bereich fest positioniert mit variabler breite nach rechts... hm dürfte nich das prob sein. werd ich morgen mal testen
|
|
|
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 10.10.2007 09:50
Titel
|
|
|
ich weiß nicht ob ich alles richtig verstanden habe aber kannste die grüne box nicht über nen hintergrund faken?
<body mit background-color: grün>
<div header mit background-color: grau></div>
<div "grüne" box mit background-color: grün; margin-bottom: 100px;></div>
<div footer mit position: absolute; left: 0; bottom: 0; height: 100px; background-color: grau></div>
</body>
das sollte doch den gewünschten effekt erzielen, nicht?
Zuletzt bearbeitet von fuchsbau am Mi 10.10.2007 09:51, insgesamt 2-mal bearbeitet
|
|
|
|
|
m
Moderator
Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mi 10.10.2007 09:56
Titel
|
|
|
fuchsbau hat geschrieben: | das sollte doch den gewünschten effekt erzielen, nicht? |
Nein, absolut überhaupt nicht.
|
|
|
|
|
fuchsbau
Dabei seit: 15.08.2005
Ort: .//root
Alter: 40
Geschlecht:
|
Verfasst Mi 10.10.2007 11:05
Titel
|
|
|
stimmt, sorry.
|
|
|
|
|
|
|
|
Ähnliche Themen |
Nested DIVs und eins mit 100% + scrollbar bitte ;)
{divs mit scrollbar} lassen sich nicht mit mausrad scrollen?
Bilder exakt auf Fensterhöhe skalieren
Scrollbar mit JS
scrollbar
Scrollbar problem...
|
|