Question

我知道这个问题被问了很多，因为我看过很多“解决方案”试图让这个对我有用。如果我破解html但我想使用所有CSS，我可以让它工作。我想要的只是一个标题，下面有两列，我希望这三个项目填满整个页面/屏幕，我想用CSS做，没有框架或表格。 XAMPP user interface看起来我希望我的页面看起来如何，但同样，我不想使用框架。我无法将两个橙色的色谱柱延伸到屏幕的底部。我确实拥有它所以看起来右侧的列只是通过将主体背景颜色更改为与右列的背景颜色相同的颜色而延伸到屏幕的底部，但我希望两列都延伸到底部所以我不必那样做。以下是我到目前为止的情况：

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;
}

Answer 1

这样的事情应该有效

<div id="header" style="position:absolute; top:0px; left:0px; height:100px; width:100%; overflow:hidden; background-color:#00FF00">
</div>
<div id="leftnav" style="position:absolute;top:100px; left:0px; width:100px; bottom:0px; overflow:auto;background-color:#0000FF">

</div>
<div id="content" style="position:absolute;top:100px; left:100px; bottom:0px; right:0px; overflow:auto;background-color:#FF0000">
</div>

Answer 2

嗯，这是您的代码已更改以符合您的要求：

<!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" />
    <style type="text/css">
        html, body {padding:0;margin:0;background-color:#CCCCCC;height:100%;}
        #hd{position:absolute;top:0;left:0;width:100%;height:100px;background-color:green;z-index:1;}
        #col{float:left;width:230px;height:100%;background-color:red;}
        #bd{width:100%;height:100%;background:pink;}
        .content{padding:100px 0 0 230px;}
    </style>
    </head>
    <body>
        <div id="hd">MY SITE</div>
        <div id="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="bd">
            <div class="content">
                Lots of words
            </div>
        </div>
    </body>
</html>

请注意，可能需要在body div之类的容器内部允许正确格式化html元素！

希望这有助于......：）

使用CSS </div>将<div>标记扩展到页面底部

2 个答案: