CSS 定位/高度扩展整页

Question

大家好，我的 CSS 位置有点问题。基本上我有一个设置在屏幕左侧的侧边栏，它基本上包括我所有的导航链接。我希望侧边栏一直延伸到屏幕底部，无论用户是最小化还是最大化浏览器，或者他们的分辨率。即使页面碰巧滚动，我也希望 div 一直到底部。我在这方面遇到了很多麻烦，无法使其正常工作。这是我的代码，如果有人发现它不起作用的原因，我们将不胜感激。

HTML:

    <div id="welcome">

                Welcome <br> to My Site!<br>

                    <span style="color: red; ">(Beta)</span>

            <div id="sidebar"><a href="index.php">Home</a></div>

            <div id="sidebar"><a href="link">link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="Link">Link</a></div>

            <div id="sidebar"><a href="forumPage.php">Forum</a></div>

            <div id="sidebar"><a href="link">About</a></div>

            <div id ="sidebar"><a href="link">Requests</a></div>

            <div id="sidebar" ><a href="unity.php">"Pr0j3ct Un1ty"</a></div>

            <div style="font-size: 20px;">Logged in as: <?php echo $_SESSION['username']; ?> </div>

            <div id = "sidebar" >

                <a href = "logoff.php">Logout</a>   </div>

            <div style=" font-size: 16px;"><a href="accountSettings.php">Account Settings</a></div>


            <div style="margin-left: 10px; position: absolute; bottom: 0px; font-size: 16px;"><b>© jm1llz 2010</b></div>


</div>

CSS 页面:

#welcome

{

width: 15%;

float: left;

background-color: darkgrey;

height: 100%;

text-align: center;

font-size: 24px;

font-family: Comic Sans MS;

font-weight: bold;
}

Answer 1

最好的方法是使用背景图片。如果您现在不使用主体背景图像，那么最简单的方法是使用侧边栏的宽度创建图像。

body {
    background-image: url(/images/bg.jpg); /* Wherever your image is located */
    background-repeat: repeat-y;
}

无论侧边栏实际有多高，这都会使图像一直到底部。

然后在侧边栏上，将 div 样式设置为适合您创建的图像。如果它像您所说的那样一直向左，那么您需要添加到您的样式中的就是正确的宽度和一些填充。

如果您使用 body 背景图像而不是创建另一个 div...

div { width: 100%; height: 100%; } /* You may need a float: left; as well */

...并将上述背景 CSS 放入新的 div 中。然后，您必须在 HTML 的标记内添加新的 div。