0

设置body的背景 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;
}

我还有一些将#container 高度设置为窗口的availHeight 的javascript。

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

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

1 回答 1

0

首先，修复 HTML 中的错误。他们看起来很可怕。

然后，您将高度计算为screen.availHeight。那是一个错误，availHeight是桌面的高度。不包括任务栏之类的东西以及您计算机上可能拥有的任何东西。你需要的是screen.height.

于 2013-07-17T09:07:33.690 回答