HTML,CSS - DIV über restliche Höhe

midan23 · Freitag 5. Januar 2018, 11:58

Hallo zusammen,

derzeit arbeite ich ein einem einfachen Wiki. Server und Datenbank-Anbindung in Python, der Rest in HTML mit JavaScript und CSS.
(Für mich eine gute Gelegenheit, meine JS-Kenntnisse etwas aufzufrischen ...)

Clientseitig habe ich mir ein einfaches Layout ausgedacht ... dachte ich zumindest. Das Aussehen der HTML-Seite wollte ich komplett über CSS machen. Und genau das ist der Punkt, der nicht mehr so einfach ist.

Eigentlich habe ich nur drei DIV-Elemente vertikal angeordnet: Menü, Inhalt und Formular.
Das Menü ist immer sichtbar, zwischen den beiden anderen wird bei Bedarf umgeschaltet, so das nur eins sichtbar ist.

Der Content besteht wiederum aus Navigation, das oben angeordnet ist und sich über die ganze Breite der Seite erstreckt. Darunter sind nebeneinander eine Seitenliste und der Inhalt der aktuellen Seite.

Und diese Seitenliste macht mir Probleme: Sie soll die restliche Höhe der Seite einnehmen ... was ich bisher nicht über CSS hinbekommen habe.
Bisher habe ich nur eine Alternative mit Javascript ... mit der ich nicht wirklich glücklich bin ...

Ich hab zu Testzwecken die CSS-Datei vereinfacht und in eine ebenfalls vereinfachte HTML-Datei gepackt.

Meine Frage: Kann man das mit CSS lösen? Oder muss ich mit der Javascript-Version leben?

[codebox=html5 file=index.html]
<!DOCTYPE html>¬
<html>¬
<head>¬
<meta charset="utf-8"/>¬
<title>Test</title>¬
<script>¬
function set_height() {¬
var menu_height = document.getElementById("menu").offsetHeight;¬
var path_height = document.getElementById("path").offsetHeight;¬
var height = window.innerHeight - menu_height - path_height - 10;¬
document.getElementById("pages").style.height = height + "px";¬
}¬
//window.addEventListener("resize", set_height);¬
//document.addEventListener("DOMContentLoaded", set_height);¬
</script>¬
<style type="text/css">¬
html, body {¬
width: 100%;¬
height: 100%;¬
margin: 0;¬
padding: 0;¬
}¬
body {¬
background-color: #c0c0c0;¬
}¬
#menu {¬
font-size: small;¬
background-color: #e0e0e0;¬
padding: 5px;¬
}¬
#content_view {¬
}¬
#path {¬
font-size: small;¬
background-color: #d0d0d0;¬
padding: 5px;¬
border-bottom: thin solid black;¬
}¬
#pages {¬
background-color: #d0d0d0;¬
border-right: thin solid black;¬
padding: 5px;¬
width: 10%;¬
float: left;¬
}¬
#content {¬
padding: 5px;¬
float: left;¬
}¬
#edit_view {¬
display: none;¬
}¬
</style>¬
</head>¬
<body>¬
<div id="menu">¬
Menü¬
</div>¬
<div id="content_view">¬
<div id="path">¬
Navigation¬
</div>¬
<div id="pages">¬
Seiten¬
</div>¬
<div id="content">¬
Inhalt¬
</div>¬
</div>¬
<div id="edit_view">¬
Formular¬
</div>¬
</body>¬
</html>¬
[/code]

midan23 · Freitag 5. Januar 2018, 13:50

Wie ich gerade festgestellt habe, gäbe es eine Möglichkeit, die Berechnung von JS nach CSS zu verlagern.
Dazu müsste ich nur die Höhe der DIVs "menu" und "path" kennen und diese für die Berechnung der Höhe des DIVs "content_view" verwenden (Stichwort calc(100% - x))

Vorschläge willkommen ...

(Und Sorry wgen den Sonderzeichen "¬" im Code oben ... Copy & Paste lässt grüßen

Diese nutze ich im Vim um die Zeilenenden anzuzeigen)

noisefloor · Freitag 5. Januar 2018, 14:29

Hallo,

die Frage hat ja so richtig null komma nix Python-Bezug... Warum stellst du die Frage nicht in einem passenden Forum für Webdesign? Da kriegst du ziemlich sicher schneller eine besser Antwort...

Abgesehen davon: wenn du dein Design "responsive" machst, dann wird doch automatisch der zur Verfügung stehende Platz genutzt... Dafür gibt es auch diverse Frameworks, die das schon alles können und wo man im besten Fall nur nur ein bisschen am Thema (Schriftart, Farben etc.) schrauben braucht.

Gruß, noisefloor

midan23 · Freitag 5. Januar 2018, 15:55

noisefloor hat geschrieben: die Frage hat ja so richtig null komma nix Python-Bezug... Warum stellst du die Frage nicht in einem passenden Forum für Webdesign? Da kriegst du ziemlich sicher schneller eine besser Antwort...

Na ja ... Den Server habe ich in Python geschrieben ... Und mich wegen einer Frage auf die Suche nach einem brauchbaren Forum machen?

noisefloor hat geschrieben: Abgesehen davon: wenn du dein Design "responsive" machst, dann wird doch automatisch der zur Verfügung stehende Platz genutzt... Dafür gibt es auch diverse Frameworks, die das schon alles können und wo man im besten Fall nur nur ein bisschen am Thema (Schriftart, Farben etc.) schrauben braucht.

Frameworks wollte ich eben nicht verwenden ... (auch für den JS-Teil habe ich keins verwendet ... ).

Mein Ziel ist es eben nicht nur ein Wiki zu programmieren, sondern mich mal mit den Grundlagen in Sachen HTML, CSS und Javascript zu befassen.

__deets__ · Freitag 5. Januar 2018, 16:07

Du musst ja kein framework verwenden, aber ggf. kannst du eines benutzen, um zu lernen wie du es selbst machst. Oder allgemein dir eine Seite anschauen, die tut, was du willst, und versuchen nachzuvollziehen, wie es gemacht wird.

midan23 · Freitag 5. Januar 2018, 16:34

__deets__ hat geschrieben:...Oder allgemein dir eine Seite anschauen, die tut, was du willst, und versuchen nachzuvollziehen, wie es gemacht wird.

Genau damit habe ich die letzten 2 Wochen verbracht ... Layout mit 2 Spalten? Kein Problem ... 2 gleich hohe Spalten? Etwas schwieriger, aber machbar ... 1 Spalte über die gesamte Höhe? Habe ich auf meiner Homepage (http://midan23.gmxhome.de) ... aber ein Spalte über die restliche Höne einer Seite ... da habe ich bisher nichts gefunden ...

noisefloor · Freitag 5. Januar 2018, 17:43

Hallo,

wie wäre es denn mit einem Flexbox-Design: https://developer.mozilla.org/en-US/doc ... ut/Flexbox

Wenn ich dein Anliegen richtig verstanden habe, dann sollte das sich damit machen lassen.

BTW: in deinem Blog verwendest du XHTML - das ist ja schon ein bisschen... älter. Nutzt du mit Absicht kein HTML 5?

Gruß, noisefloor

Sirius3 · Freitag 5. Januar 2018, 17:46

@noisefloor: wie kommst Du drauf? Der DOCTYPE sagt doch eindeutig HTML5.

noisefloor · Freitag 5. Januar 2018, 18:34

Hallo,

@Sirius3: nicht der gezeigte HTML-Quelltext, sondern der vom TE verlinkte Blog des TE.

Gruß, noisefloor

midan23 · Freitag 5. Januar 2018, 21:17

Wegen xHTML auf meiner Homepage: reine Bequemlichkeit

Um sicher zu stellen, das der HTML-Code korrekt ist, hatte ich einen Validator als Plugin im Firefox. Dieses hatte leider eine unschöne Eigenart: Bei xHTML zeigte es sofort an, ob der Code valide war oder nicht, während ich bei HTML5 erst zur Quellcode-Ansicht wechseln musste ...

Flexbox gehört ebenfalls zu den fehlgeschlagenen Versuchen ... Genau so wie Grid.

noisefloor · Freitag 5. Januar 2018, 22:10

Hallo,

Flexbox gehört ebenfalls zu den fehlgeschlagenen Versuchen ... Genau so wie Grid.

Hm - das sind aber die Standards heute... Das ganze ist halt nicht ganz trivial, dass sauber hinzubekommen. Weswegen man gerne eine Framework einsetzt...

Gruß, noisefloor

midan23 · Montag 8. Januar 2018, 10:03

Hab erst mal eine funktionierende Lösung gefunden: Da ich in CSS die Höhe eines Elements nicht als Höhenangabe von anderen Elementen angeben kann, bleibt nur die Höhe des einen festzulegen und den gleichen Wert für die Berechnung der Höhe des anderen Elements zu nutzen.

In meinem Fall so:

In den DIVs "menu" und "path" die Schriftgröße nach "1.5ex" geändert
Beim DIV "pages" die Höhe auf 100% gesetzt
Dem DIV "content_view" ebenfalls eine Höhe geben: calc(100% - 3ex - 40px)

Ist vielleicht nicht schön, aber es erfüllt seinen Zweck ...
(Und fragt mich bitte nicht, voher die "40px" herkommen ...)