用css定位绝对和相对元素_Css_Css Float

用css定位绝对和相对元素

css

用css定位绝对和相对元素,css,css-float,Css,Css Float,我试图定位html元素，但一次失败了。我的html代码非常简单： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="layout.css"> </head> <body> <header>Header</<header> <div> <di

我试图定位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>

最后，该站点应如下所示：

具有相对的页眉、页脚和内容。侧边栏应该有自己的滚动条，并且应该在页脚和页眉后面（如果它们在视图中）。。就像这里：

但页脚应始终位于底部或“顶部”。 withe和transparent框应该是您当前可以在浏览器中看到的剪辑框

当我尝试杜邦时，我犯了以下错误：当内容太小时，页脚不在底部

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

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

多谢各位

您需要清除浮点值：

<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>

标题对于#您应该添加的侧栏
position: fixed;
left: 0px;
top: 80px;

（顶部值应基于收割台的高度）
类似于#页脚
这应该能帮助你实现你想要的。
让我知道这是否有帮助，我会尽力提供帮助。
查看这把小提琴：[Update 2]

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>

标题
侧栏
内容
页脚

要在内容较少时保持页脚在底部，请执行以下操作：

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


$（函数（）{
$（函数（）{
var bht=$（'body'）.height（）；
var wht=$（窗口）.height（）；
如果（bht过了一会儿，我的一个朋友帮我找到了一个不错的解决方案，页脚没有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>

很抱歉，我在第二个图中犯了一个错误。这个问题现在已经修复。这里我有问题二：当我向下滚动时。页脚在内容的中间。顶部的值基于包含的div，看起来应该是0才能接触到页眉。Thx，但是页脚和页眉不应该是固定的。它们应该像#内容一样滚动。与此相似：非常好。侧边栏如何获得页脚和页眉之间（而不是下方）左侧的剩余空间？如果内容太小，则页脚不在底部：（可以包含一个小js吗？好的。但是如何使边栏的边框接触页脚和页眉？如图1和图2所示？因此边栏具有灵活的高度？
<script>
$(function(){
    $(function () {
        var bht = $('body').height();
        var wht = $(window).height();
        if (bht < wht) {
            $('.footer').css("bottom", "0px");
        }
    });
});
</sctipt>

<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>

*{
    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;
}