Frage zu „wo ist das Hirn?“

[Matthias Scharwies]

Guten Morgen Nix,

herzlichen Glückwünsch,

Du hast die Scrollbalken mit margin und overflow weggekriegt.

Trotzdem erinnert mich das eher an Rumprobieren:

body {
	box-sizing: border-box;
	min-inline-size: 100vi; max-inline-size: 100vi;
	min-block-size: 100vb; max-block-size: 100vb;
	overflow: hidden;
}

body ist ein Block-Element, das automatisch 100% der Breite einimmt:

body {
	box-sizing: border-box;
	min-block-size: 100vb; 
	overflow: hidden;
}

max-block-size oder max-height, was ich verwenden würde, wäre nur interessant, wenn es auch wirklich Inhalt geben würde.

:where(header, main, article, footer) { border: 1ex solid black; }
		}

Warum einfach, wenn's auch kompliziert geht?

header, main, article, footer { border: 1ex solid black; }
		}

Das mit Grid solltest du noch mal nachlesen:

body {
	display: grid; 
	grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr;
			
	haeder { grid-area: "a"; background: lime; }
	main { grid-area: "b"; background: cyan; }
	article { grid-area: "c"; background: yellow; }
	footer { grid-area: "d"; background: red; }

Klick' dich doch mal durch den Seiteninspektor, dann merkst du, dass es keinen haeder (sic) gibt und die anderen 3 Regelsätze zu grid-area durchgestrichen sind, weil sie einen ungültigen Wert enthalten!

Ich würde die Grid-Items in der von mir gewünschten Reihenfolge ins Markup notieren und dann den auto-placement-Algorithmus ohne weitere CSS-Regelsätze machen lassen.

---

@nix Bitte stelle gerne Fragen zum Artikel, wenn du welche hast.

Falls du nur etwas kommentieren willst, solltest du Titel und Tag ändern.
Falls nicht, werden wir deine Posts künftig löschen.

Herzliche Grüße
Matthias Scharwies
Vorsitzender SELFHTML e.V.