Fatal编程技术网
  • css/
  • 使用液体/液体布局实现css粘性页脚时出现问题

使用液体/液体布局实现css粘性页脚时出现问题

css html

使用液体/液体布局实现css粘性页脚时出现问题,css,html,footer,sticky-footer,Css,Html,Footer,Sticky Footer,我正在尝试实现CSS Sticky Footer方法，如中所示。（我也尝试过这个解决方案，但无济于事） 我对每件事都很了解，至少我认为我了解。我有一个容器div（他们称之为wrap），一个标志栏（他们称之为页眉）和一个页面div（他们称之为main），然后我有我的页脚 问题是，如果启用了overflow:auto，那么我会得到一个非常短的div和一个滚动条（讨厌）。但是如果我把它注释掉，我所有的内容都会显示出来，但是页面仍然认为div的大小与overflow:auto没有注释掉的大小相同 否则，

我正在尝试实现CSS Sticky Footer方法，如中所示。（我也尝试过这个解决方案，但无济于事）

我对每件事都很了解，至少我认为我了解。我有一个容器
div
（他们称之为wrap），一个标志栏（他们称之为页眉）和一个页面
div
（他们称之为main），然后我有我的页脚

问题是，如果启用了
overflow:auto
，那么我会得到一个非常短的
div
和一个滚动条（讨厌）。但是如果我把它注释掉，我所有的内容都会显示出来，但是页面仍然认为
div
的大小与
overflow:auto
没有注释掉的大小相同

否则，它将正常工作。页脚停留在底部，调整大小时，页脚停止在短页/main
div
。有什么办法可以让我的内容见底吗？我应该提到，我不能为我的页面/main
div
使用固定高度，因为我需要它根据它包含的
div
的大小调整大小（以当时可见的为准）

可能是页脚造成了问题，也可能不是，无论如何，我都需要一些帮助来解决这个问题

HTML:

<body>
<div id="container">
    <div id="logo"> 

        <div id="home-flower"></div><!-- end home-flower -->
        <div id="about-flower"></div><!-- end about-flower -->
        <div id="proof-flower"></div><!-- end proof-flower -->
        <div id="contact-flower" ></div><!-- end other-flower --> 
    </div><!-- end logo-->
    <div id="page">
        <div id="spacer"><br/></div><!-- end spacer -->
        <div id="home">home</div><!-- end home -->
        <div id="about">about</div><!-- end about -->
        <div id="proof">proof of concept</div><!-- end proof -->
        <div id="contact">contact</div><!-- end contact --> 
    </div><!-- end page -->
</div><!--end container-->
<div id="footer"> </div><!-- end footer -->
</body>

* {
    margin:0px auto !important;
}

html, body {
    height:100%;    
}

#container {
    width:800px;
    background-color:#F0F;
    min-height: 100%;
    height: auto !important;
    height: 100%;
}

#page{
    width:100%;
    min-height:100%;
    position:relative;
    background-color:#F00;
    padding-bottom:75px;
    /*overflow:auto;*/
}

#logo{
    position:relative;
    width:100%;
    height:210px;
    top:0px;
    left:0px;
    background:url(images/logo.png);
}

#home{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    visibility:visible;
}

#about{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#proof{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#contact{
    position:absolute;
    width:100%;
    height:100%;
    top:0px;
    left:0px;   
    visibility:hidden;
}

#footer {
    position:relative;
    margin-top:-75px;
    width:800px;
    height:75px;
    background-color:#C0F;
    clear:both;
}

#spacer {
    position:relative;
    line-height:20px;
}
使用如何

<div id="footer">
  This is footer text
</div><!-- end footer -->
页脚贴在页面底部

这就是你想要的吗。

使用

<div id="footer">
  This is footer text
</div><!-- end footer -->
页脚贴在页面底部

这就是你要找的。

看起来我需要将
#home
，
#about
，
#proof
，以及
#contact
divs的位置改为relative，而不是像我那样的绝对。然而，一旦我这样做了，它们就不再叠在一起了。关于如何使相对定位的div具有相同的（x，y）位置，以便它们正好位于彼此的顶部，有什么想法吗？我将每个div的
顶部
和
左侧
设置为
0px
，但它们只是分层而不是堆叠…如果这有意义的话。

看起来我需要更改
主页
，
关于
，
证明
，的位置，和
#contact
divs to relative而不是像我那样的绝对值。然而，一旦我这样做了，它们就不再叠在一起了。关于如何使相对定位的div具有相同的（x，y）位置，以便它们正好位于彼此的顶部，有什么想法吗？我将每个div的
顶部
和
左侧
设置为
0px
，但它们只是将自己分层，而不是堆叠…如果这有意义的话。

以前尝试过。然而，这使它保持在所有内容之上。我要找的是，如果内容没有延伸到查看区域之外，则将其保留在窗口底部；如果内容比查看区域长，则将其保留在内容的末尾。谢谢你的回答，我以前也试过。然而，这使它保持在所有内容之上。我要找的是，如果内容没有延伸到查看区域之外，则将其保留在窗口底部；如果内容比查看区域长，则将其保留在内容的末尾。谢谢你的回答