Question

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

这是我的代码：

<!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>

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

我该怎么办？

感谢。

Answer 1

您可以随时使用简单的方法并使用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>

Answer 2

可能是您正在寻找的以下标记代码只需在您的css样式表中添加“overflow：hidden”即可解决您的问题。

<!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>

Answer 3

我测试了你的标记，它显示了最后一个div'main'扩展到页面底部....显示的是什么？在引用的cssReset.css中有哪些样式信息（虽然这会被页面上的样式覆盖html

Answer 4

以下是您正在寻找的内容：

<!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>

将div扩展到页面底部

4 个答案: