Tabellen Höhe = maximalle div-Container Höhe

P1977 · 25. November 2018

Hallo,

Habe ein folgendes Layout
Links Menu feststehend
Oben Submenu feststehend
Rechts bzw unterhalb der Menus der Seiteninhalt.
Das ganze eingeschlossen in einen Div-Container

Jetzt wird eine Tabelle auf einen Fenster angezeigt
dieses läuft allerdings in der Höhe über
die Tabellen Überschriften sind feststehend thead
und der tbody sollte sich scrollen lassen ohne das sich
der Rest "Verschwindet".

Wenn ich die Höhe der Tabelle mit px angebe dann funktioniert es.
Die Prozent angabe bleibt leider erfolglos.

Wo kann ich noch ansetzen?

mfg Peter

index.php

PHP

<!doctype html>
<html lang="de">
<head>
<link rel="stylesheet" type="text/css" href="../bibliotheken/css/seitenaufteilung.css">
<link rel="stylesheet" type="text/css" href="../bibliotheken/css/schalter.css">
<link rel="stylesheet" type="text/css" href="../bibliotheken/css/tabelle.css">
<link rel="stylesheet" type="text/css" href="../bibliotheken/css/formular.css">
<link rel="stylesheet" type="text/css" href="../bibliotheken/css/tooltip.css">
<script src="../bibliotheken/javascript/jquery-3.3.1.min.js"></script>
<?php
include ("../bibliotheken/php/datenbank.php");
?>
<title>
Test Seite
</title>
</head>
<?php
if ($_GET)
{
$Menu=$_GET['menu'];
$Seite=$_GET['seite'];
}
else
{
$Menu="";
$Seite="";
}
?>
<div id=fenstergroesse>
<div id=menu_links>
<?php
include("menu_links.php");
?>
</div>
<div id=menu_oben>
<?php
if(file_exists($Menu.".php"))
include($Menu.".php");
else
include ("start/menu_start.php");
?>
</div>
<div id=seiteninhalt>
<?php
if(file_exists($Seite.".php"))
include($Seite.".php");
else
echo "Seite nicht gefunden Admin benachrichtigen";
#include("start/start.php");
?>
</div>
</div>
</html>

Alles anzeigen

table.css

Code

/* Allgemeine Tabellen Konfiguration */
table, th, td
{
border: 1px solid black;
}
table
{
height: 60%;
/*max-height: 600px;*/
table-layout: fixed;
overflow: auto;
/*height: auto !important;*/
}
td
{
height:22px;
line-height:22px;
}
tr:hover
{
background: grey;
}
/* */
tbody
{
overflow: auto;
/*max-height: 600px;*/
background: silver;
}
thead,
tbody,
tr,
td,
th
{
display: block;
}
tr:after
{
content: "";
display: block;
visibility: hidden;
clear: both;
}
tbody td,
thead > tr > th
{
float: left;
}
thead > tr > th,
thead > tr > td
{
font-size:16px;
border-bottom: 0;
letter-spacing: 1px;
vertical-align: top;
background: #51596a;
text-transform: uppercase;
color: #ffffff;
}
/* */
/* Tabellen Konfiguration Katalog Liste */
/* */
.Tabelle_Katalog
{
width: 1600px;
}
.Tabelle_Katalog_Titel_Aktion
{
width:85px;
}
.Tabelle_Katalog_Titel_Bezeichnung
{
width:300px;
}
.Tabelle_Katalog_Titel_Artikell
{
width:300px;
}
.Tabelle_Katalog_Titel_Lieferant
{
width:180px;
}
.Tabelle_Katalog_Titel_Kostenstelle
{
width:200px;
}
.Tabelle_Katalog_Spalte_Aktion
{
width:85px;
}
.Tabelle_Katalog_Spalte_Bezeichnung
{
width:300px;
}
.Tabelle_Katalog_Spalte_Artikell
{
width:300px;
}
.Tabelle_Katalog_Spalte_Lieferant
{
width:180px;
}
.Tabelle_Katalog_Spalte_Kostenstelle
{
width:200px;
}

Alles anzeigen

seitenaufteilung.css

Code

html, body
{
height: 99%;
width: 99%;
overflow: none;
}
/* Seitenaufteilung Administrationsseite */
/* */
/* Maximalle Seiten größe */
#fenstergroesse
{
max-height: 99%;
overflow: none;
background-color: #00A0F0;/* TKMA Farbe */
border: 5px solid black;
/* Standard Schrift */
font-family: monospace;
font-size: 16px;
}
#menu_links
{
width: 190px;
min-height: 100%;
height: 100%;
float: left;
padding: 5px;
text-align: center;
}
#menu_oben
{
height: 70px;
margin-left: 200px;
padding: 5px;
}
#seiteninhalt
{
overflow: auto;
padding: 5px;
display: block;
}

Alles anzeigen

P1977 · 25. November 2018

Hallo,

habe eine Lösung gefunden
und zwar einen Javascript Code der die Höhe vom tbody Tag prozentuell anpasst

Code

<script>
var fenster_hoehe=window.innerHeight;
var tabellen_Hoehe=fenster_hoehe * 0.75;
$("tbody").css('height',tabellen_Hoehe);
window.addEventListener("resize", function () {
var fenster_hoehe=window.innerHeight;
var tabellen_Hoehe=fenster_hoehe * 0.75;
$("tbody").css('height',tabellen_Hoehe);
});
</script>

wenn wer eine Schönere Lösung hat Bitte her damit.

mfg Peter

Tags