Du verwendest das table-Element unzulässig. Das table-Element ist nur für Tabellendaten gedacht und weder dein Quelltext noch der bislang vorhandene Inhalt (Menu Bar) deuten auch nur ansatzweise auf Tabellendaten hin.
Da das table-Element nur für Tabellendaten gedacht ist verhält es sich samt Inhalt wie für Tabellendaten sinnvoll. Dadurch entstehen dann bei unzulässigem Inhalt Probleme.
Weiterhin sind position-Angaben im CSS heutzutage dank Flexbox (display: flex;) und CSS-Grid (display: grid;) meist überflüssig. Responsive Layout (vernünftige benutzerfreundliche Ausgabe auf allen Bildschirmgrößen) wird dadurch in der Regel meist verhindert. Anfänger unterschätzen zudem die Komplexität und die Auswirkungen von position-Angaben. position sollte deshalb nur dort eingesetzt werden, wo es unbedingt erforderlich ist.
Das div-Elemente in Tabellen unzulässig (also falsch) sind wurde bereits geschrieben.
Aus deinen Angaben ist leider nicht ersichtlich, was du überhaupt willst.
height-Angaben und die Einheit in % im CSS haben zudem sehr unterschiedliche Auswirkungen, je nachdem bei welchem Element und in welchem Zusammenhang sie verwendet werden. "height: 100%;" ist im Regelfall nicht dafür gedacht, dass Elemente die volle zur Verfügung stehende Höhe ausfüllen.
Anfänger verwenden häufig viel zu viele Elemente. Da das die Erstellung von Internetseiten behindert wurde in den aktuellen HTML-Regeln festgeschrieben, dass nur wirklich notwendige Elemente verwendet werden sollen. Das scheint bei dir auch der Fall zu sein.
Offensichtlich soll der Inhalt den gesamten Bildschirm ausfüllen. Dabei soll die Darstellung einmal waagerecht geteilt sein und der untere Teil senkrecht. Mit deinem Inhalt ergibt sich dafür folgendes HTML:
Code:
<h2>Menu Bar</h2>
<p>a</p>
<p>b</p>
Das ist alles.
Dazu dann (jedenfalls soweit ich deine Angaben deute) das folgende CSS:
Code:
body {
background-color: grey;
height: 100vh;
padding: 0;
margin: 0;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
}
h2 {
padding: 0;
margin: 0;
grid-column: 1 / 3;
display: flex;
align-items: center;
}
p {
padding: 0;
margin: 0;
display: flex;
align-items: center;
}
p:nth-of-type(2) {
background-color: darkgreen;
}
