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

最简单实用的方法是在包含浮动侧边栏的元素上投放bg图像，其中bg颜色/图形垂直重复。确保容器有溢出/清除。

Answer 2

我想你在问“如何让两根柱子的高度相同？”

如果这是问题，那么通过CSS（例如meder的建议）可以有各种“技巧”，但是现在我强烈建议使用javaScript。如果你使用像jQuery这样的东西，这是相当微不足道的。

ON文件就绪，抓住每个div的高度，然后将较短的一个强制到一个等于较高的一个高度。

Answer 3

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

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

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

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

如果您使用的是身体背景图片而不是使用...创建另一个div

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

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

CSS定位/高度扩展整页

3 个答案: