HTML,CSS - DIV über restliche Höhe
Verfasst: 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]
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]
Diese nutze ich im Vim um die Zeilenenden anzuzeigen)