2023年6月20日发(作者：)

html如何加页脚,html-如何将页脚扩展到页⾯底部？html-如何将页脚扩展到页⾯底部？我有这样的布局⽬前，我的页⾯布局如下：-------------------| | 100px height| HEADER ||-----------------|| || MAIN | 500px height| ||-----------------|| || FOOTER ||-----------------|| || |-------------------我希望页脚沿着主要内容区域扩展到页⾯底部，这如何实现？-------------------| | 100px height| HEADER ||-----------------|| || MAIN | 500px height| ||-----------------|| || FOOTER || || || FOOTER |-------------------注意：到⽬前为⽌，我已经注意到所有答案都将页脚固定在页⾯底部，但是当拖动页脚仅向下移动/主容器扩展时，我希望页脚扩展。Jai asked 2020-07-18T17:57:17Z8个解决⽅案130 votes我正在寻找解决这个确切问题的⽅法，并且遇到了⼀种⾮常简单的⽅法来达到我想要的效果：footer {box-shadow: 0 50vh 0 50vh #000;}这样会创建⼀个阴影，如果不需要，该阴影会从屏幕上掉落，否则将为页脚下⽅的空间提供100vh(相当于整个视⼝⾼度的覆盖率)的覆盖率，因此主体背景不会出现在其下⽅。c4collins answered 2020-07-18T17:57:35Z6 votes如果可能的话，我会产⽣页脚延伸到底部的错觉。假设页脚背景⾊为＃000000；将主体背景⾊设置为＃000000并确保跨越100％的宽度。颜⾊＃00000仅出于⽰例⽬的，您可能需要图像切⽚或渐变中使⽤的经纬度等。Tim Wickstrom answered 2020-07-18T17:58:17Z6 votes尽管已标记为已回答，但似乎⽆法完全回答OP的问题。 我遇到了同样的挑战，这就是我发现可以⼯作的地⽅：将您的HTML和正⽂设置为100％的⾼度确保所有内容(包括页脚)都包裹着⼀个⼤div(⽹站容器)在页脚中摆弄空间。这是CSS：html, body{height: 100%}.site-container{overflow: hidden;min-height: 100%;min-width: 960px;}.footer{padding-bottom: 32000px;margin-bottom: -32000px;}Sam Straub answered 2020-07-18T17:58:59Z4 votesRyan answered 2020-07-18T17:59:19Z2 votes您可以使⽤粘性页脚来实现该效果(如此处列出的效果)，并将其应⽤于您的设计中以将页脚推到⽂档的底部，如我在此演⽰中所展⽰的：演⽰，在这⾥编辑。Andres Ilich answered 2020-07-18T17:59:44Z1 votes尝试下⾯的⼩提琴，该⼩提琴演⽰了如何始终将页脚保持在底部的概念。w3uiguru answered 2020-07-18T18:00:12Z1 votes我遇到了同样的问题，并发现它可以正常⼯作-只要页脚单独显⽰，即不在容器div或其他任何内容中。基本上，我需要将内容固定为宽度，并以⽩⾊背景为中⼼，并在body标签中⽔平重复背景图像，以扩展浏览器窗⼝的整个宽度，并在标题下⽅提供⼀个漂亮的区域。 我希望页脚为深⾊并扩展到页⾯底部，⽽不考虑内容的⾼度和浏览器窗⼝的⼤⼩。我的页⾯(⾮常简单)如下：fixed height and containing various stufffloated left and containing navfloated left and containing various stuffvarious stuff, address etc.然后在css中包括以下规则(以及所有其他样式)：html, body {height: 100%;overflow: hidden;}footer {height: 100%;}隐藏的溢出消除了由100％的html和正⽂⾼度引起的烦⼈的滚动条，该html和主体⾼度补偿了容器的⾼度并延伸到浏览器窗⼝之外。Bill Citrine answered 2020-07-18T18:00:50Z0 votes与@ c4collins相似，如果有⼈拥有巨⼤的显⽰器，则可以使⽤视图⾼度⽽不是固定像素footer{box-shadow: 0 100vh 0 100vh #000000;}thomaschall answered 2020-07-18T18:01:11Z

2023年6月20日发(作者：)

html如何加页脚,html-如何将页脚扩展到页⾯底部？html-如何将页脚扩展到页⾯底部？我有这样的布局⽬前，我的页⾯布局如下：-------------------| | 100px height| HEADER ||-----------------|| || MAIN | 500px height| ||-----------------|| || FOOTER ||-----------------|| || |-------------------我希望页脚沿着主要内容区域扩展到页⾯底部，这如何实现？-------------------| | 100px height| HEADER ||-----------------|| || MAIN | 500px height| ||-----------------|| || FOOTER || || || FOOTER |-------------------注意：到⽬前为⽌，我已经注意到所有答案都将页脚固定在页⾯底部，但是当拖动页脚仅向下移动/主容器扩展时，我希望页脚扩展。Jai asked 2020-07-18T17:57:17Z8个解决⽅案130 votes我正在寻找解决这个确切问题的⽅法，并且遇到了⼀种⾮常简单的⽅法来达到我想要的效果：footer {box-shadow: 0 50vh 0 50vh #000;}这样会创建⼀个阴影，如果不需要，该阴影会从屏幕上掉落，否则将为页脚下⽅的空间提供100vh(相当于整个视⼝⾼度的覆盖率)的覆盖率，因此主体背景不会出现在其下⽅。c4collins answered 2020-07-18T17:57:35Z6 votes如果可能的话，我会产⽣页脚延伸到底部的错觉。假设页脚背景⾊为＃000000；将主体背景⾊设置为＃000000并确保跨越100％的宽度。颜⾊＃00000仅出于⽰例⽬的，您可能需要图像切⽚或渐变中使⽤的经纬度等。Tim Wickstrom answered 2020-07-18T17:58:17Z6 votes尽管已标记为已回答，但似乎⽆法完全回答OP的问题。 我遇到了同样的挑战，这就是我发现可以⼯作的地⽅：将您的HTML和正⽂设置为100％的⾼度确保所有内容(包括页脚)都包裹着⼀个⼤div(⽹站容器)在页脚中摆弄空间。这是CSS：html, body{height: 100%}.site-container{overflow: hidden;min-height: 100%;min-width: 960px;}.footer{padding-bottom: 32000px;margin-bottom: -32000px;}Sam Straub answered 2020-07-18T17:58:59Z4 votesRyan answered 2020-07-18T17:59:19Z2 votes您可以使⽤粘性页脚来实现该效果(如此处列出的效果)，并将其应⽤于您的设计中以将页脚推到⽂档的底部，如我在此演⽰中所展⽰的：演⽰，在这⾥编辑。Andres Ilich answered 2020-07-18T17:59:44Z1 votes尝试下⾯的⼩提琴，该⼩提琴演⽰了如何始终将页脚保持在底部的概念。w3uiguru answered 2020-07-18T18:00:12Z1 votes我遇到了同样的问题，并发现它可以正常⼯作-只要页脚单独显⽰，即不在容器div或其他任何内容中。基本上，我需要将内容固定为宽度，并以⽩⾊背景为中⼼，并在body标签中⽔平重复背景图像，以扩展浏览器窗⼝的整个宽度，并在标题下⽅提供⼀个漂亮的区域。 我希望页脚为深⾊并扩展到页⾯底部，⽽不考虑内容的⾼度和浏览器窗⼝的⼤⼩。我的页⾯(⾮常简单)如下：fixed height and containing various stufffloated left and containing navfloated left and containing various stuffvarious stuff, address etc.然后在css中包括以下规则(以及所有其他样式)：html, body {height: 100%;overflow: hidden;}footer {height: 100%;}隐藏的溢出消除了由100％的html和正⽂⾼度引起的烦⼈的滚动条，该html和主体⾼度补偿了容器的⾼度并延伸到浏览器窗⼝之外。Bill Citrine answered 2020-07-18T18:00:50Z0 votes与@ c4collins相似，如果有⼈拥有巨⼤的显⽰器，则可以使⽤视图⾼度⽽不是固定像素footer{box-shadow: 0 100vh 0 100vh #000000;}thomaschall answered 2020-07-18T18:01:11Z