Ich weiß, dass diese Frage oft gestellt wird, denn ich habe mir viele "Lösungen" angeschaut, um dieses Problem in den Griff zu bekommen. Ich kann es zum Laufen bringen, wenn ich die HTML hacken, aber ich möchte alle CSS verwenden. Alles, was ich möchte, ist eine Kopfzeile mit zwei Spalten darunter, und ich möchte, dass diese drei Elemente die gesamte Seite/Bildschirm ausfüllen, und ich möchte es mit CSS und ohne Frames oder Tabellen tun. Die XAMPP-Benutzeroberfläche sieht genau so aus, wie ich meine Seite haben möchte, aber auch hier möchte ich keine Rahmen verwenden. Ich kann nicht erreichen, dass die beiden orangefarbenen Spalten bis zum unteren Rand des Bildschirms reichen. Ich habe es so hinbekommen, dass es so aussieht, als würde sich die rechte Spalte bis zum unteren Rand des Bildschirms erstrecken, indem ich die Hintergrundfarbe des Körpers in die gleiche Farbe wie die Hintergrundfarbe der rechten Spalte geändert habe, aber ich möchte, dass sich beide Spalten bis zum unteren Rand erstrecken, damit ich das nicht tun muss. Hier ist, was ich bis jetzt habe:
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html dir="ltr" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MY SITE</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="container">
<div id="masthead">
MY SITE</div>
<div id="left_col">
Employee Management<br />
<a href="Employee%20Management.php">Add New Employee</a><br />
<a href="Employee%20Management.php">Edit Existing Employee</a><br />
<br/>
Load Management<br />
<a href="Load%20Management.php">Log New Load</a><br />
<a href="Load%20Management.php">Edit Existing Load</a><br />
<br/>
Report Management<br />
<a href="Report%20Management.php">Employee Report</a><br />
<a href="Report%20Management.php">Load Report</a></div>
<div id="page_content">
<div id="page_content_heading">Welcome!</div>
Lots of words</div>
</div>
</body>
</html>CSS
#masthead {
background-color:#FFFFFF;
font-family:Arial,Helvetica,sans-serif;
font-size:xx-large;
font-weight:bold;
padding:30px;
text-align:center;
}
#container {
min-width: 600px;
min-height: 100%;
}
#left_col {
padding: 10px;
background-color: #339933;
float: left;
font-family: Arial,Helvetica,sans-serif;
font-size: large;
font-weight: bold;
width: 210px;
}
#page_content {
background-color: #CCCCCC;
margin-left: 230px;
padding: 20px;
}
#page_content_heading {
font-family:Arial,Helvetica,sans-serif;
font-size:large;
font-weight:bold;
padding-bottom:10px;
padding-top:10px;
}
a {
color:#0000FF;
font-family:Arial,Helvetica,sans-serif;
font-size:medium;
font-weight:normal;
}
a:hover {
color:#FF0000;
}
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: #CCCCCC;
}
