Question

身体的背景设置为background-attachment：fixed;和背景位置：左下角;当窗口最大化时，这很有效，但当我进入全屏时，底部有一个空的空白区域。这是代码：

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<link rel="stylesheet" type="text/css" href="index.css" />
<script type = "text/javascript" src="script.js">
</script>
    <div id = "container">
        <body onLoad="baseSize()">
        <div id = "head">
            <div id = "icon"><p>Craig InTheDell</p></div>
        </div>
        <div id = "navcol">
            <table>
                <tr><td><a href = "poetry.html">Poetry</a></td></tr>
                <tr><td><a href = "essays.html">Essays</a></td></tr>
                <tr><td><a href = "stories.html">Stories</a></td></tr>
                <tr><td><a href = "about.html">About</a></td></tr>
            </table>
        </div>
            </body>
    </div>
</html>

CSS

html {
    font-family: "Times New Roman";
}
body {
    background-image: url(treeshort.jpg);
    background-repeat: no-repeat;
    background-position: left bottom;
}
#container {
    font-size: 16px;
    width: 960px;
    margin: 0 auto;
    overflow: auto;
}
#head {
    height: 100px;
}

#icon {
    font-size: 50px;
    float: right;
}
table {
    position: absolute;
    left: 950px;
    font-size: 40px;
}
a {
    color: #000000;
}

我也有一些javascript将#container height设置为窗口的availHeight。

function baseSize() {
    var available = window.screen.availHeight;

    var container = document.getElementById("container");
    container.style.height = available + "px";
}

Answer 1

首先，修复HTML中的错误。它们看起来很糟糕。

然后，您将高度计算为screen.availHeight。这是一个错误，availHeight是桌面的高度。排除诸如任务栏之类的内容以及您在计算机上可能拥有的任何内容。你需要的是screen.height。

我有一个背景设置在屏幕的底部，但是当我进入全屏时，下方有一个空白空间。为什么会这样？

1 个答案: