2

我知道这是一个经常被问到的问题，但我根本找不到任何解决方案来解决应该是一件简单的事情。

这是我的代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <link rel="stylesheet" href="../cssReset.css" />
    <style>
        html, body {
            height: 100%;
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>

很简单，但我不能让最后一个 div 扩展到页面底部。如果我使用“自动”，它不会显示任何内容，因为没有内容。如果我使用 100%，它将使用我的浏览器高度并创建不必要的滚动条。

我能做些什么？

谢谢。

4

4 回答 4

4

您总是可以采取简单的方法并使用 JavaScript。这是一个简单的例子。

<style>
DIV { margin: 0; }
</style>
<script>
function fixMain() {
    var menu = document.getElementById("menu");
    var center = document.getElementById("center");
    var main = document.getElementById("main");
    var height = document.body.offsetHeight - (menu.offsetHeight + center.offsetHeight);
    main.style.height = height + 'px';
}
window.addEventListener("load", fixMain, false);
window.addEventListener("resize", fixMain, false);
</script>
于 2013-05-29T19:06:49.437 回答
1

可能是以下标记代码将是您正在寻找的内容，只需在您的 CSS 样式表中添加“溢出：隐藏”即可解决您的问题。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <style>
    *{margin:0;padding:0}   
        html, body {
            height: 100%;
            overflow: hidden;   
        }
        #menu {
            height: 100px;
            background-color: red;
        }
        #center {
            height: 250px;
            background-color: green;
        }
        #main {
            height: 100%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
于 2013-05-29T19:32:33.123 回答
0

我测试了你的标记，它显示最后一个 div 'main' 延伸到页面底部......正在为你显示什么？以及引用的 cssReset.css 中有哪些样式信息（尽管这将被页面 html 上的样式覆盖

于 2013-05-29T19:02:01.187 回答
0

也许您正在寻找以下内容：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>test</title>

    <!--CSS STYLING-->
    <style>
        *{margin:0;padding:0}
        html, body {
            height: 100%;
        }
        #menu {
            height: 10%;
            background-color: red;
        }
        #center {
            height: 25%;
            background-color: green;
        }
        #main {
            height: 75%;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div id='menu'>
    </div>
    <div id='center'>
    </div>
    <div id='main'>
    </div>
</body>
</html>
于 2013-05-29T19:16:44.437 回答