html css页脚代码,HTML CSS - 页脚 - 下面的空格

博主在尝试使页脚始终位于页面底部,但遇到了与标题配合时的布局困扰。他们分享了已尝试的不同技术,并附带了一个JSFiddle链接展示问题。讨论中提到了使用'粘性定位'的解决方案,以及可能需要调整的内容和侧边栏divs的布局。
摘要由CSDN通过智能技术生成

我有问题试图让我的页脚“粘”到页面底部的所有内容下面。我尝试了许多不同的技术,但无法使其与标题一起工作。HTML CSS - 页脚 - 下面的空格

什么是最好的方式来布局我的布局来实现这一目标?

正如你可以看到侧边栏&内容divs通过页脚。

Title

Title

title

Languages

  • 1
  • 2
  • 3
  • 4
  • 5

Frameworks

  • 1
  • 2

Footer

CSS:

html, body

{

width: 100%;

height: 100%;

margin:0;

padding: 0;

}

h1, p {

padding: 0;

margin: 0;

}

/*Content*/

#wrapper{

min-height: 70%;

height: auto;

height: 70%;

margin: 0 auto -400px;

}

#content{

float:left;

width:70%;

height: 100%;

}

#sidebar{

padding-top: 30px;

float:left;

width: 30%;

background-color: lightgrey;

height: 100%;

text-align: center

}

/* Header */

header #title_text{

font-size: 70px;

}

header #title_wrapper{

text-align:center;

position: relative;

top:100px;

}

header {

background-color: orange;

position: relative;

height:30%;

width: 100%;

color:white;

margin:0;

}

/* footer */

footer{

background-color: #202020;

color: white;

position: absolute;

width: 100%;

height: 60px;

bottom: 0;

}

+3

嗨,请做一个谷歌搜索“粘脚” - 有很多不同的方式可以实现 –

+0

看到这个小提琴https://jsfiddle.net/zqmpLenp/ –

+0

检查我的答案为jsfiddle(https: //jsfiddle.net/pdyrgc2j/1/)。删除尾部1 /以查看Declan的原始代码,但位置:绝对更改为position:fixed(https://jsfiddle.net/pdyrgc2j/) –

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值