Container soll Seitenfüllen sein, und skallierbar

[Maike]

Hallo, alle miteinander. Ich habe bei einer CSS Seitengestaltung Darstellungs Probleme. Ich möchte das Sich mein Content über die ganze Seite verteilt, nur 2% oben und 2% unten sollen frei sein

Die Seite soll max. 1400px Breit sein. Mein Content ist einfach ca. 5% zu viel. Wenn man den Browser verkleinert, zieht er sich zwar in der Breite zusammen aber nicht in der Höhe. Auch sind die unteren Boxen (content-left) nicht hoch genug.

Ich habe alles hier eingestellt, so das man es besser sehen kann, was ich versuche zu erklären.

http://www.cssdesk.com/wJCZZ

* {
  margin: 0;
	padding: 0;
	border: 0;
	font-family: 'PT Sans Narrow',sans-serif,Arial,Helvetica;
}

html, body {
  height:100%;
} 

.clear:after{clear:both;content:".";display:block;height:0;visibility:hidden;}

.container {max-height: 100%;height:auto !important;height:100%;background:#F7F8E0;}
.content{margin:0 auto ; max-width:1400px;min-width:800px; padding:2% 0 2%0;}

.header_left{width:300px;height:100px; background:#AA0000;float:left;}
.header_right{display:block;height:100px; background:#d8d8d8;float:auto;}

.content_left{width:300px;max-height:100%; background:#CC0000;float:left;}
.content_right{display:block;max-height:100%; background:#a0a0a0;float:auto;overflow-y: scroll;}

<div class="container">
<div class="content">

<div class="header_left">1
</div>


<div class="header_right">2
</div>

<div class="content_left">3
</div>


<div class="content_right">

Jemand musste Josef K. verleumdet haben, denn ohne dass er etwas Böses getan hätte, wurde er eines Mgeknotetes Tau vom Boden, drohte ihnen damit und hielt sie dadurch von dem Sprunge ab. In den letzten Jahrzermaßen bewundernden Blick den ihm doch wohlbekannten Apparat. Sie hätten noch ins Boot springen können, aber der Reisende hob ein schweres, geknotetes Tau vom

</div>

</div>

</div>

[Gunnar Bittersmann]

@@Maike

Ich habe bei einer CSS Seitengestaltung Darstellungs Probleme.

Ich habe bei der Aneinanderreihung von einzeln stehenden Substantiven Leseprobleme. Richtige Zeichensetzung macht den Text lesbar:

Ich habe bei einer CSS-Seitengestaltung Darstellungs-Probleme.

bzw.

Ich habe bei einer CSS-Seitengestaltung Darstellungsprobleme.

Die Seite soll max. 1400px Breit sein.

Da „die Seite“ so breit ist wie der Viewport, meinst du vermutlich: linke und rechte Spalte sollen zusammen max. 1400px breit sein?

Und das erscheint mir um einiges zu viel. Eine Zeilenlänge sollte bei Fließtext etwa 35 bis 75 Zeichen enthalten (optimal so bei 60–65).

Wenn man den Browser verkleinert, zieht er sich zwar in der Breite zusammen aber nicht in der Höhe. Auch sind die unteren Boxen (content-left) nicht hoch genug.

Beschäftige dich mit CSS Grid und Flexbox.

LLAP 🖖

[Rolf b]

Ich versuche ja selber gerade, Flexbox zu lernen, und spiele deshalb gern damit 'rum.

Vermutlich hast Du Dir sowas vorgestellt.

@Gunnar Bittersmann kannst Du mir erklären, warum die Margins von main mit vh funktionieren, mit % aber nicht?

Rolf

[beatovich]

hallo

@Gunnar Bittersmann kannst Du mir erklären, warum die Margins von main mit vh funktionieren, mit % aber nicht?

%-Angaben sind durchaus abhängig von dimensionen wie Höhe oder Breite des Elements selbst. vh jedoch ist unabhängig von der Dimension des Elements.

[Rolf b]

Ok. Das erklärt mir aber zweierlei nicht:

• Warum bekomme ich 4% Rand, wenn ich margin-top: 2% hinschreibe (Body ist 677px hoch, margin-top ist 26px statt der erwarteten 13px)
• Warum bleibt margin-top gleich hoch, wenn ich den Ausgabebereich von jsfiddle höher und niedriger mache?

Das Verhalten ist übrigens das Gleiche, wenn ich statt margin-top auf dem main Element dem Body ein padding-top gebe.

Edit: Ich habe es jetzt, er bezieht margin-top: 2% auf die BREITE des Browserfensters. Macht man das Fenster breiter und schmaler, ändert sich margin-top. Mit dieser Information bin ich dann auch fündig geworden. Au wei au wei au wei. Wer hat sich denn da das Leben leicht gemacht und einfach festgelegt, dass Margin-Prozente immer auf die Breite des Containers bezogen sind???

Rolf

[beatovich]

hallo

Ok. Das erklärt mir aber zweierlei nicht:

• Warum bekomme ich 4% Rand, wenn ich margin-top: 2% hinschreibe (Body ist 677px hoch, margin-top ist 26px statt der erwarteten 13px)
• Warum bleibt margin-top gleich hoch, wenn ich den Ausgabebereich von jsfiddle höher und niedriger mache?

Das Verhalten ist übrigens das Gleiche, wenn ich statt margin-top auf dem main Element dem Body ein padding-top gebe.

JSFiddle stellt die Ausgabe in einem iframe dar. Kann das ein Problem auslösen? Dass er das Browserfenster als Bezug genommen hat statt des iframe selbst? Würde mich beim aktuellen Chrome eigentlich wundern. In ein eigenes HTML-Dokument übertragen hab ich's noch nicht - mache ich nachher mal.

Rolf

Ich würde mich für solche experimente mehr auf die Browsereigenen Entwicklertools verlassen. Bezüglich iframes rate ich hier eher dass vh und vw den Viewport meinen und das ist in dem Fall nicht der Bildschirm.

für die Details für die margin-Berechnung verweise ich besser auf die Spec https://www.w3.org/TR/CSS2/box.html#margin-properties wo auch spezifiziert ist, dass unter bestimmten Bedingungen für margin-top/margin-bottom die width als basis genommen wird.