Question

我试图定位html元素，但是失败了。我的HTML代码很简单：

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
    <header>Header</<header>
    <div>
        <div id="sidebar">
            Sidebar
        </div>
        <div id="content">
            <br/><br/>
            Content
            <br/><br/><br/>
        </div>
    </div>
    <footer>Footer</footer>
</body>
</html>

以及相关的css文件：

* {
    font-size: larger;
    text-align: center;
}

body{
    background-color: #888888;
    margin: 0;
}

header{
    background-color: #ffff88;  
}

#content{
    background-color: #ff8888;  
}

#sidebar{
    background-color: #88ff88;
    float: left;
    width: 300px;
}

footer{
    background-color: #8888ff;  
}

最后，网站应如下所示： Sketch of the side

使用相对页眉，页脚和内容。侧边栏应该有它自己的滚动条，如果它们在视图中，应该在页脚和标题后面..就像这里： enter image description here

但是页脚应该始终位于底部或者#t; topsy＆＃34;。那个透明的盒子应该是你当前可以在浏览器中看到的剪辑。

当我尝试这个时，我犯了这个错误： enter image description here 当内容太小时，页脚不在底部。

或者：当我向下滚动时，页脚不在底部。 enter image description here

有人知道如何用css处理这个问题吗？

非常感谢！

Answer 1

看看这个小提琴： [更新2]

<强> http://jsfiddle.net/thecbuilder/g5Uk3/1/

<强> CSS

.header, .footer {
    width:100%;
    text-align:center;
    z-index:200;
    left: 0;
    right: 0;
    display: block;
}
.header {
    position: absolute;
    top:0;
    background-color: #ffff88;
}
.footer {
    position: absolute;
    background-color: #8888ff;
}
.content {
    width:80%;
    margin-left:20%;
    display:inline-block;
    background-color: #ff8888;
    color:white;
    position: relative;
}
.sidebar {
    bottom:0;
    top:0;
    left:0px;
    position:fixed;
    overflow-y:scroll;
    width:20%;
    display:inline-block;
    background-color: #88ff88;
    color:white;
    z-index:100;
}

<强> HTML

<div class="header">Header</div>
<div class="main">
    <div class="sidebar">
        <p>Side bar</p>
    </div>
    <div class="content">
        <p>Content</p>
    </div>
</div>
<div class="footer">Footer</div>

在内容较少时将页脚保持在底部： http://jsfiddle.net/thecbuilder/g5Uk3/2/

添加此jQuery脚本 -

<script>
$(function(){
    $(function () {
        var bht = $('body').height();
        var wht = $(window).height();
        if (bht < wht) {
            $('.footer').css("bottom", "0px");
        }
    });
});
</sctipt>

Answer 2

您需要清除浮动值：

<header>Header</<header>
    <div>
        <div id="sidebar">
            Sidebar
        </div>
        <div id="content">
            <br/><br/>
            Content
            <br/><br/><br/>
        </div>
    </div>
    <br clear="all" />
    <footer>Footer</footer>

Answer 3

对于#sidebar，您应该添加

position: fixed;
left: 0px;
top: 80px;

（最高值应基于标题的高度）

与#footer

类似

position: absolute;
bottom: 0px;
overflow: hidden;

这可以帮助您实现您的目标。让我知道这是否有帮助，我会尽力协助。

Answer 4

过了一段时间，我的一个朋友帮我找到了一个很好的解决方案，没有JavaScript的页脚。如果页面的内容或大小发生变化，则很难实现最后一个。这是我们找到的解决方案（使用固定侧边栏的简单JavaScript）。 html文件：

<html>
    <head>
        <title>Footer Test</title>
        <link rel="stylesheet" href="main.css">
        <script>
            function posSidebar(event){
                var b = document.getElementById('wBox').clientHeight;
                var w = window.innerHeight;
                var s = window.pageYOffset;
                document.getElementById('sidebar').style.top = Math.max(0, 30-s) + "px";
                document.getElementById('sidebar').style.bottom = Math.max(w-b+s-0,0) + "px";
            }
            window.onscroll = posSidebar;
        </script>
    </head>
    <body>
        <div id="wBox">
            <header>
                <p>Header</p>
            </header>
            <div id="body">
                <div id="sidebar">
                    <p id="log">Sidebar</p><p id="log1">Sidebar</p><p id="log2">Sidebar</p><p id="log3">Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                    <p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p><p>Sidebar</p>
                </div>
                <div id="content">
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>
                    <p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p><p>Content</p>                  
                </div>
            </div>
        </div>
        <footer>
            <p>Footer</p>
        </footer>
    </body>
</html>

和css文件：

*{
    margin:0;
    text-align: center;
    font-size: 16px;
}

body{
    position: absolute;
    width: 100%;
    bottom: 30px;
    top: 0px;
    background-color: #999;
}


div#wBox{
    min-height: 100%;
    background-color: #666;
    position: relative;
}

footer{
    height: 30px;
    background-color: #9f9;
    width: 100%;
}

#sidebar{
    position: fixed;
    top: 30px;
    bottom: 0px;
    left: 0px;
    width: 200px;
    background-color: #f99;
    overflow: auto;
}

#content{
    position: relative;
    background-color: #ff9;
    margin-left: 200px;
}

header{
    height: 30px;
    width: 100%;
    background-color: #99f;
}

用css定位绝对和相对元素

4 个答案: