Wie stelle ich die div height so ein, das die innere HTML-Seite komplett angezeig wird?
Ich möchte eine Seite erstellen, wo ich alle Seiten, welche ich im Informatik-Unterricht erstellt habe in einen Div-Container lade. Jedoch wenn ich das tue, füllt bei mir die innere HTML-Seite nicht den kompletten Container sondern bekommt eine eigene Scrollbar. Ich hätte aber gerne , dass sich die komplette innere HTML-Seite auf den Container angezeigt wird und stattdessen mit der Scrollbar der Haupt Seite scrolle. Wie bekomme ich das hin?
Haupt-Seite
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="../CSS/main.css" type="text/css" rel="stylesheet">
<title>Informatik</title>
</head>
<body id="index_body">
<div id="main_container">
<div id="header">
<h1 align="middle">Informatikunterricht</h1>
</div>
<div id="menu_container">
<ol style="line-height: 200%;">
<li class="menu_button"><a href="#" onclick="loadPage('Kommentar')" >Seite</a></li>
</ol>
</div>
<div id="page_container">
page
</div>
</div>
</body>
<script>
function loadPage(path){
const object = '<object type="text/html" data="' + `${path}` + '.html" id="content"></object>';
document.getElementById("page_container").innerHTML=object;
}
</script>
</html>
Css-Datei (gilt auch für die innere HTML-Seite)
#main_container{
display:grid;
grid-template-columns: 20% 80%;
grid-template-rows: 10%, auto;
width:auto;
background-color: #121212;
}
#header{
grid-column: 1 / span 2;
grid-row: 1;
height: fit-content;
background-color: #181818;
}
#page_container{
display: flex;
flex-direction: column;
/* background-color: #282828; */
background-color: blue;
grid-row: 2;
min-height: 100%;
}
#menu_container{
background-color: #181818;
grid-row: 2;
}
#content{
flex: 1;
width: 100%;
}
span{
background-color: gray;
border: 1px solid white;
padding: 0px 2px;
border-radius: 5px;
}
body{
color: #FFFFFF;
font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
font-size: 15pt;
}
#index_body{
background-color: #121212;
}
/* body:not(#index_body){
overflow:hidden;
} */
1 Antwort
Versuch mal das
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
<!--
html, body {
margin: 0;
padding: 0;
height: 100%;
}
div#GanzeSeite {
position: relative;
margin: 0 auto;
width: 700px;
min-height: 100%; /* Moderne Browser */
height: auto !important; /* Moderne Browser */
height: 100%; /* IE */
background-color:black;
--->
</style>
<title></title>
</head>
<body>
<div id="GanzeSeite"> </div>
</body>
</html>
Soll ich dann in den Div#Ganze Seite dann alle meine divs reinpacken oder ersetzt es bei mir den Div#main_container?
Also wenn ich deinen Quellcode 1 zu 1 übernehme funktioniert es leider immer noch nicht