粘贴到页面底部的CSS页脚

我有几个div块位于容器内一个接一个。容器有100％的高度。集装箱第一分区内有100px的高度（标题）。 Second Div（主体）需要全部高度达到网站底部（屏幕尺寸的一部分）或更高。

Third Div有绝对位置，位于底部。但是因为在页面的右侧看滚动所以集装箱科的概要高度超过100％。如何解决这个问题？

页面的CSS：身高：100％需要超过100％

html, body { 
 
    height: 100%; 
 
    margin:0; 
 
    padding:0; 
 
    background-color: yellow; 
 
} 
 

 
.container { 
 
    position:relative; 
 
    min-height:100%; 
 
    background-color: green; 
 
} 
 

 
.header { 
 
    background-color: blue; 
 
    height: 100px; 
 
} 
 

 
.mainbody { 
 
    background-color: gray; 
 
    height: 100px; 
 
} 
 

 
.footer { 
 
    position:absolute; 
 
    bottom:0; 
 
    width: 100%; 
 
    background-color: red; 
 
}

<body> 
 
    <div class="container"> 
 
    <div class="header"> 
 
     <p> 
 
     header 
 
     </p> 
 
    </div> 
 
    <div class="mainbody"> 
 
     <p> 
 
     mainbody 
 
     </p> 
 
    </div> 
 
    <div class="footer"> 
 
     <p> 
 
     footer 
 
     </p> 
 
    </div> 
 
    </div> 
 
</body>

来源

2016-01-25 deSoul

您是否尝试过'position：fixed' for footer？ –

这听起来像你想粘在页面底部的页脚？如果是谷歌的“粘性页脚”，有几种方法可以做到这一点 –

打开你的浏览器。它不显示任何滚动条，如此代码段所示。设置

.container{ height:100%}

而不是

min-height:100%

，因为它会超过页面全尺寸。

来源

2016-01-25 14:38:37

你可以尝试position:fixed; bottom:0; left:0; right:0; height:somevalue;为footer元素，并为body元素，还加入padding-bottom:somevalue（someValue中对身体的填充，底部和页脚的高度相同的值）

来源

2016-01-25 14:40:28 n1kkou

为您的HTML利润率肮脏的解决方案。我已经为您的html body body添加了一个margin-top属性。现在右侧没有滚动条。

好像margin: 0;对margin-top属性没有影响。我在线阅读过一些浏览器倾向于在某些元素（如body）上默认设置页边距。我给了你一个非常肮脏的解决方案，可能无法很好地处理响应式设计。

html, body { 
    height: 100%; 
    margin: 0; 
    padding: 0; 
    margin-top: -8px; 
    background-color: yellow; 
}

来源

2016-01-25 14:47:47 c00ki3s

粘贴到页面底部的CSS页脚

回答

相关问题