CSS DIV mit Hight:100%, aber 4:3 Seitenverhältnis

[Pelzameise]

Hallo Freunde,
schon wieder ich

Meine Frage:

Ich habe ein DIV, der 100% hoch und 100% breit ist. Ich will aber, dass er auf verschiedenen Auflösungen und Fenstergrößen immer das gleiche Seitenverhältnis hat. Dabei aber immer 100% der Höhe ausnutzt.

So sieht das zur Zeit aus:

html {
width:100%;
height:100%;
}

body {
width:100%;
height:100%;
overflow:hidden;
}

img#hintergrund {
position: fixed;
top: 0em;
left: 0em;
width: 100%;
height: 100%;
}

table{
width:100%;
height:100%;
padding:0px;
margin:0px;
border:0;

}

div#tabelle {
position: absolute;
top: 0em;
left: 0em;
right: 0em;
bottom: 0em;
overflow: auto;
padding: 2em;
}

div#auswahl {
position:relative;
height: 100%;
width: 100%;
border: 0px solid red;
}


div#oben {
border: 0px solid black;
height: 100%;
width: 100%;
position: relative;
}

div#rechts {
border: 0px solid black;
height: 100%;
width: 100%;
position: relative;
}

div#unten {
border: 0px solid black;
height: 100%;
width: 100%;
position: relative;
}

div#links {
border: 0px solid black;
height: 100%;
width: 100%;
position: relative;
}


td{
width:20%;
height:20%;
border:0px solid yellow;
}



tr{
width: 20%;
height:20%;
}

Ideen?

 

[agraaaaa]

Hm, ich versteh leider nicht ganz, was genau du machen möchtest. Alles 100%, aber doch irgendwie 4:3?
Dein geposteter CSS Code ist zwar schön, aber ohne weitere Infos kann man damit nicht viel anfangen.

Eine Beispiel Datei und am besten noch ne kleine Grafik dazu machen, dann kann dir wohl besser geholfen werden.

 

[Pelzameise]

Die komplette Site im Anhang.

Ich will nur die Höhe auf 100%, die Breite soll sich dann anpassen.

 

[Skudrinka]

height: 100%;
width: 100%;


Fällt dir was auf?

setze dich einfach width auf 80% oder so

 

[d-maass]

Ich denke mal, dass das mit reinem CSS wohl nicht zu machen ist.
Was irgendwie gefummelt funktionieren würde, wäre die Breite/Höhe per Javascript an die Auflösung des Benutzers anzupassen...

 

[silvotin]

Ich will aber, dass er auf verschiedenen Auflösungen und Fenstergrößen immer das gleiche Seitenverhältnis hat. Dabei aber immer 100% der Höhe ausnutzt.

Dazu fallen mir die folgenden drei Möglichkeiten ein:

• DIV mit fixer Breite und fixer Höhe --> Seitenverhältnis OK, Höhe und Breite passt aber eventuell nicht
• CSS über PHP --> per PHP eine dynamisches CSS Datei erstellen (je nach Auflösung des Besuchers), und so die fixe Breite / Höhe des DIV eintragen
• DIV per Javascript anpassen --> per Javascript die Höhe / Breite des DIV anpassen (wieder je nach Auflösung des Besuchers)

 

[Maysi2k]

da musst du die breite fest in pixel festlegen.

bei % Angaben wird das logischerweise aus der auflößung ausgerechnet.

 

[Pelzameise]

@ Skudrinka:
ich denke, du hast mein Problem nicht verstanden.

DIV mit fixer Breite und fixer Höhe --> Seitenverhältnis OK, Höhe und Breite passt aber eventuell nicht

Fällt denek ich raus, weil ich die Site von XGA bis FullHD kompatibel machen will/muss.

CSS über PHP --> per PHP eine dynamisches CSS Datei erstellen (je nach Auflösung des Besuchers), und so die fixe Breite / Höhe des DIV eintragen

Schön, leider habe ich nicht den geringsten Dunst von PHP.

DIV per Javascript anpassen --> per Javascript die Höhe / Breite des DIV anpassen (wieder je nach Auflösung des Besuchers)

Ist denke ich das einzige, das mir bleibt. Kann mir da jemand ein Beispiel geben?

 

[claW.]

Ist denke ich das einzige, das mir bleibt. Kann mir da jemand ein Beispiel geben?

den dreisatz kennst du noch oder?

breite / höhe = 4 / 3
höhe = 3 / 4 * breite

 

[Pelzameise]

Naja, ich glaube kaum, dass du mir jetzt die Mathe erlären musst. Hatte da eher an einen Javascriptbefehl gedacht.

Ist aber egal, ich hab schon eine Lösung gefunden.

 

[BuzzGo]

Wäre interessant zu erfahren, wie du es gelöst hast.

 

[Pelzameise]

Ich hab die Tabelle über das ganze Bild vergrößert, um beim ändern der Größe die Relationenen zu erhalten. Dann hab ich alle Entfernungen und Größen mit % angepasst.

Ist zwar nicht immer im gleichen Seitenverhältnis, erfüllt aber seinen Zweck.

 

[Rain]

wenn du bei immer 100% höhe immer 4:3 haben willst, dann ist deine breite zwangsläufig immer 133%, was bei nem rahmen für deine seite natürlich doof ist, da solltest du eher die breite auf 100% setzen