javascript - 求助!!! Html Css Footer的设置
要求
1.网页内容少时,footer再浏览器的底部,如下图
2.网页内容多时,浏览内容时(未浏览到底部)footer不可见,如下图
3.网页内容多时,浏览内容时(浏览底部)footer可见,如下图
回复内容:
要求
1.网页内容少时,footer再浏览器的底部,如下图
2.网页内容多时,浏览内容时(未浏览到底部)footer不可见,如下图
3.网页内容多时,浏览内容时(浏览底部)footer可见,如下图
請搜尋sticky footer 有很多css就能做掉的方式 在能夠只顧支援flexbox的情況 我是用這個超清爽的方式 連結
将footer固定在页面底部的实现方法
同求,之前采用 JS 动态计算,踩过不少坑。后来直接改为中间 content
设了个最小高度
footer: function() { var footerHeight = 0, footerTop = 0, $footer = $(".footer"); positionFooter(); //定义positionFooter function function positionFooter() { //取到div#footer高度 footerHeight = $footer.height(); //div#footer离屏幕顶部的距离 footerTop = ($(window).scrollTop() + $(window).height() - footerHeight) + "px"; /* DEBUGGING STUFF console.log("Document height: ", $(document.body).height()); console.log("Window height: ", $(window).height()); console.log("Window scroll: ", $(window).scrollTop()); console.log("Footer height: ", footerHeight); console.log("Footer top: ", footerTop); console.log("-----------") */ //如果页面内容高度小于屏幕高度,div#footer将绝对定位到屏幕底部,否则div#footer保留它的正常静态定位 if (($(document.body).height() + footerHeight) < $(window).height()) { $footer.css({ position: "absolute", top: footerTop, }); } else { $footer.css({ position: "static" }); } }
bootsrap官网下面有一个插件 好像是handroom(具体忘记了)用于固定header的,footer应该也可以
谢谢大家,问题解决了,方法有好多
但是我在html中用的margin太多了,导致页面无法完美100%显示⊙﹏⊙b汗
最后用padding加上sticky footer的方法解决了
参考1
参考2
参考3
JS根据document的scrollTop与document.height-window.height的差,改footer的position:是relative还是fixed;~

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











PHP 8.4는 상당한 양의 기능 중단 및 제거를 통해 몇 가지 새로운 기능, 보안 개선 및 성능 개선을 제공합니다. 이 가이드에서는 Ubuntu, Debian 또는 해당 파생 제품에서 PHP 8.4를 설치하거나 PHP 8.4로 업그레이드하는 방법을 설명합니다.

CakePHP는 PHP용 오픈 소스 프레임워크입니다. 이는 애플리케이션을 훨씬 쉽게 개발, 배포 및 유지 관리할 수 있도록 하기 위한 것입니다. CakePHP는 강력하고 이해하기 쉬운 MVC와 유사한 아키텍처를 기반으로 합니다. 모델, 뷰 및 컨트롤러 gu

VS Code라고도 알려진 Visual Studio Code는 모든 주요 운영 체제에서 사용할 수 있는 무료 소스 코드 편집기 또는 통합 개발 환경(IDE)입니다. 다양한 프로그래밍 언어에 대한 대규모 확장 모음을 통해 VS Code는

CakePHP는 오픈 소스 MVC 프레임워크입니다. 이를 통해 애플리케이션 개발, 배포 및 유지 관리가 훨씬 쉬워집니다. CakePHP에는 가장 일반적인 작업의 과부하를 줄이기 위한 여러 라이브러리가 있습니다.

CakePHP에 로그인하는 것은 매우 쉬운 작업입니다. 한 가지 기능만 사용하면 됩니다. cronjob과 같은 백그라운드 프로세스에 대해 오류, 예외, 사용자 활동, 사용자가 취한 조치를 기록할 수 있습니다. CakePHP에 데이터를 기록하는 것은 쉽습니다. log() 함수는 다음과 같습니다.
