nicht angemeldet
Frage zu „wo ist das Hirn?“
1 1 
Rolf B
Frage zu „wo ist das Hirn?“
Matthias Scharwies„Responsives Design“ ist Mist! Warum? Weil mindestens Firefox und Safari aus
body {
min-inline-size: 100vi !important; inline-size: 100vi !important;
min-block-size: 100vb !important; block-size: 100vb !important;
display: grid;
…
}
einen „Layoutbereich“ abliefern, der z. B. auf dem Desktop sowohl rechts als auch unten einen hübsch breiten Bereich abliefern, in dem NICHS erscheint. Oder, in anderen aber ähnlichen Fällen, ein Raster mit vielleicht 140vi Breite verlangen (Scrollen verbieten ist also verboten!)
Was für Pf… sitzen da, denen bestimmt nicht nur Naturgesetze (calc(5cm / 5cm) == 1cm! …) am A… vorbei gehen? Ach ja: welche mit 96 Pixeln maximaler Auflösung bei der Gehrinzellen-Dichte. Maximal!
-
Das vom User Agent mitgelieferte Stylesheet definiert
margin: 8px;(oder ähnliches) für dasbody-Element. Hast du das zurückgesetzt? -
Hallo nix,
wie du sicher weißt, ist ohne den Kontext, am besten online abrufbar, kaum zu ergründen, welchen Fehler du gemacht hast. Die !important-Ballerei nützt da eher wenig, es sei denn, du hast in den Entwicklertools bemerkt, dass andere Regeln Vorrang bekommen und du das nicht eleganter lösen kannst.
Und einen Fehler gemacht hat du sicher, denn - abgesehen von dem erwähnten margin des body, den man entweder entfernen oder abziehen muss - funktioniert es prima, den body auf 100vi × 100vb zu setzen. Hab ich schon oft genug gemacht.
calc(5cm / 5cm) KANN übrigens nicht funktionieren, CSS erwartet als Divisor eine Zahl, keine Länge. Steht auch im Wiki
Rolf
--
sumpsi - posui - obstruxi-
<head> <style> :any { margin: 0; padding: 0; } body { box-sizing: border-box; min-inline-size: 100vi; max-inline-size: 100vi; min-block-size: 100vb; max-block-size: 100vb; overflow: hidden; display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr; :where(header, main, article, footer) { border: 1ex solid black; } haeder { grid-area: "a"; background: lime; } main { grid-area: "b"; background: cyan; } article { grid-area: "c"; background: yellow; } footer { grid-area: "d"; background: red; } } </style> </head> <body> <header>Zyanisch? Oder sonst:</header> <article>Wo ist derRahmen</article> <main>unten und</main> <footer>rechts denn nur geblieben?</footer> </body>-
<head> <style> * { margin: 0; padding: 0; } body { box-sizing: border-box; min-inline-size: 100vi; max-inline-size: 100vi; min-block-size: 100vb; max-block-size: 100vb; overflow: hidden; display: grid; grid-template: "a b" 3fr "c d" 7fr / 15fr 33fr; :where(header, main, article, footer) { border: 1ex solid black; } haeder { grid-area: "a"; background: lime; } main { grid-area: "b"; background: cyan; } article { grid-area: "c"; background: yellow; } footer { grid-area: "d"; background: red; } } </style> </head> <body> <header>Zyanisch? Oder sonst:</header> <article>Wo ist derRahmen</article> <main>unten und</main> <footer>rechts denn nur geblieben?</footer> </body>-
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-sizeodermax-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.--
Was ist eine Signatur?
-
-
-