Html 我的页脚赢了'；如果内容太长，就不要停留在底部_Html_Css_Footer_Absolute

Html 我的页脚赢了'；如果内容太长，就不要停留在底部

html css

Html 我的页脚赢了'；如果内容太长，就不要停留在底部,html,css,footer,absolute,Html,Css,Footer,Absolute,因此，我一直在互联网上寻找解决方案，以使页脚停留在页面的最底部，而不管页面内容的长度。我已经遵循了教程的CSS，页脚只在页面的底部，如果内容不够长，如果内容更长，页面将得到滚动条，页脚会卡在页面的中间，因为你向下滚动更多的内容。下面是我的CSS和HTML body,html{ background-color:#fff; width:100%; height:100%; margin:0px; padding:0px; } .wrapper { position:re

因此，我一直在互联网上寻找解决方案，以使页脚停留在页面的最底部，而不管页面内容的长度。我已经遵循了教程的CSS，页脚只在页面的底部，如果内容不够长，如果内容更长，页面将得到滚动条，页脚会卡在页面的中间，因为你向下滚动更多的内容。下面是我的CSS和HTML

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
    position:absolute;
    top:100px;
    left:20%;
    width: 1024px;
    height:1300px;
    background:blue;
  }

 .container {
    position:absolute;
    top:0px;
    left:20%;
    width: 1024px;
    height:86px;
    max-height:300px;
    background:blue;
  }

#footer{
 position:absolute;
 bottom:0px;
 width:100%;
 height:100px;
 max-height:900px;
 left:0px;
 color:#000099;
 background:#f2f2f2;
}


Now this is my html, the two absolute positioned divs and the footer are inside the wrapper which has position relative.
    <html>
    <body>
    <div class="wrapper">

        <div class="container">Container 1</div>
        <div class="country-container">Container 2</div>
        <div id="footer">Footer</div>

    </div>
    </body>

</html>

body，html{
背景色：#fff；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
.包装纸{
位置：相对位置；
顶部：0px；
宽度：100%；
最小高度：100%；
填充：0px；
边际：0px；
}
.乡村货柜{
位置：绝对位置；
顶部：100px；
左：20%；
宽度：1024px；
高度：1300px；
背景：蓝色；
}
.集装箱{
位置：绝对位置；
顶部：0px；
左：20%；
宽度：1024px；
高度：86px；
最大高度：300px；
背景：蓝色；
}
#页脚{
位置：绝对位置；
底部：0px；
宽度：100%；
高度：100px；
最大高度：900px；
左：0px；
颜色：#000099；
背景#f2f2；
}
这是我的html，两个绝对位置的div和页脚位于包装器内，包装器具有相对位置。
容器1
容器2
页脚

body，html{
背景色：#fff；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
.包装纸{
位置：相对位置；
顶部：0px；
宽度：100%；
最小高度：100%；
填充：0px；
边际：0px；
}
.乡村货柜{
位置：绝对位置；
顶部：100px；
左：20%；
宽度：1024px；
高度：1300px；
背景：蓝色；
}
.集装箱{
位置：绝对位置；
顶部：0px；
左：20%；
宽度：1024px；
高度：86px；
最大高度：300px；
背景：蓝色；
}
#页脚{
位置：固定；
底部：0px；
宽度：100%；
高度：100px；
最大高度：900px；
左：0px；
颜色：#000099；
背景#f2f2；
}


容器1
容器2
页脚

body，html{
背景色：#fff；
宽度：100%；
身高：100%；
边际：0px；
填充：0px；
}
.包装纸{
位置：相对位置；
顶部：0px；
宽度：100%；
最小高度：100%；
填充：0px；
边际：0px；
}
.乡村货柜{
位置：绝对位置；
顶部：100px；
左：20%；
宽度：1024px；
高度：1300px；
背景：蓝色；
}
.集装箱{
位置：绝对位置；
顶部：0px；
左：20%；
宽度：1024px；
高度：86px；
最大高度：300px；
背景：蓝色；
}
#页脚{
位置：固定；
底部：0px；
宽度：100%；
高度：100px；
最大高度：900px；
左：0px；
颜色：#000099；
背景#f2f2；
}


容器1
容器2
页脚

请尝试此css并查看fiddle链接：

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
  background: #0000ff none repeat scroll 0 0;
  height: 1300px;
  left: 20%;
  position: relative;
  width: 1024px;
}

.container {
  background: #0000ff none repeat scroll 0 0;
  height: 86px;
  left: 20%;
  margin-bottom: 3%;
  max-height: 300px;
  position: relative;
  top: 0;
  width: 1024px;
}

#footer {
  background: #f2f2f2 none repeat scroll 0 0;
  bottom: 0;
  color: #000099;
  height: 100px;
  left: 0;
  max-height: 900px;
  position: absolute;
  width: 100%;
}

否则，您可以参照此链接：

请尝试此css并查看fiddle链接：

body,html{
  background-color:#fff;
  width:100%;
  height:100%;
  margin:0px;
  padding:0px;
}


.wrapper {
  position:relative;
  top:0px;
  width:100%;
  min-height:100%; 
  padding:0px;
  margin:0px;
}

 .country-container {
  background: #0000ff none repeat scroll 0 0;
  height: 1300px;
  left: 20%;
  position: relative;
  width: 1024px;
}

.container {
  background: #0000ff none repeat scroll 0 0;
  height: 86px;
  left: 20%;
  margin-bottom: 3%;
  max-height: 300px;
  position: relative;
  top: 0;
  width: 1024px;
}

#footer {
  background: #f2f2f2 none repeat scroll 0 0;
  bottom: 0;
  color: #000099;
  height: 100px;
  left: 0;
  max-height: 900px;
  position: absolute;
  width: 100%;
}

否则，您可以参照此链接：

尝试在Css代码中使用上述内容

<div style="width: 100%;height: auto;border:1px solid red;float:left;">
            <div style="width: 100%;height: auto;border:1px solid green;float:left;">

            </div>
            <div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">

            </div>
        </div>

尝试在Css代码中使用上述内容

<div style="width: 100%;height: auto;border:1px solid red;float:left;">
            <div style="width: 100%;height: auto;border:1px solid green;float:left;">

            </div>
            <div style="width: 100%;height: auto;border:5px solid Yellow;position: fixed;float:left;margin-top: 50%;">

            </div>
        </div>


内容
页脚
html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.60px0；
}
/*不要那样做*/
/*.包装纸{
位置：相对位置；
}  */
.内容{
背景：绿色；
高度：200px；
/*高度：700px*/
}
页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：60px；
背景颜色：橙色；
}

这个怎么样

.footer类将搜索具有相对位置（在本例中为html标记）的最近父级

如果.wrapper类具有position-relative属性，那么它将不起作用。


内容
页脚
html{
位置：相对位置；
最小高度：100%；
}
身体{
利润率：0.60px0；
}
/*不要那样做*/
/*.包装纸{
位置：相对位置；
}  */
.内容{
背景：绿色；
高度：200px；
/*高度：700px*/
}
页脚{
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：60px；
背景颜色：橙色；
}

这个怎么样

.footer类将搜索具有相对位置（在本例中为html标记）的最近父级

如果.wrapper类具有position-relative属性，那么它将不起作用。

。我不想把它修好。我希望它是动态的，停留在底部，并调整到页面内容的长度。“修复”并不能修复它。@SemiM你是在开玩笑吧，你有一个“解决方案，可以让页脚保持在页面的最底部，而不管页面内容的长度。”在这个问题上，你认为这是什么意思。现在你不希望它处于非常低的位置，因为无论发生什么，它都会保持在原来的位置。如果我有需要页面向下滚动以获取更多内容的内容，我希望页脚仍保留在最底部。非常感谢！！那么规则改变了吗？因为我发誓，我在网上看到的所有有粘性页脚的教程都显示，你需要将其包含在带有相对位置的包装中，然后添加带有绝对位置和底部0px的页脚，就像这样。我不想把它修好。我希望它是动态的，停留在底部，并调整到页面内容的长度。“修复”并不能修复它。@SemiM你是在开玩笑吧，你有一个“解决方案，可以让页脚保持在页面的最底部，而不管页面内容的长度。”在这个问题上，你认为这是什么意思。现在你不希望它处于非常低的位置，因为无论发生什么，它都会保持在原来的位置。如果我有需要页面向下滚动以查看mo的内容