스크롤바가 있는 경우에도 div를 항상 페이지 내용의 맨 아래에 유지
저는 다음 질문과 반대되는 행동을 구현하려고 합니다: CSS Push Div를 페이지 맨 아래로.예를 들어, 내용이 스크롤 막대로 넘칠 때 바닥글이 페이지 맨 아래에 있으면 됩니다(예: 스택 오버플로).
나는 디브를 가지고 있습니다.id="footer" CSS 음다및 CSS:
#footer {
position: absolute;
bottom: 30px;
width: 100%;
}
이렇게 하면 div가 뷰포트의 맨 아래로 이동하지만 페이지를 아래로 스크롤해도 요소가 그대로 유지되므로 더 이상 맨 아래에 있지 않습니다.
내용이 넘쳐도 디브가 페이지 내용의 맨 아래에 있도록 하려면 어떻게 해야 합니까?저는 고정된 위치를 찾는 것이 아니라 요소가 모든 콘텐츠의 맨 아래에 있어야 합니다.
이지미:
이이정무엇까니입히확것?▁what까니▁this▁precisely▁is입엇?position: fixed다음을 위해 설계되었습니다.
#footer {
position: fixed;
bottom: 0;
width: 100%;
}
여기 바이올린이 있습니다: http://jsfiddle.net/uw8f9/
불행하게도 HTML을 조금 더 추가하고 CSS의 한 부분을 다른 부분에 의존하지 않고는 이것을 할 수 없습니다.
HTML
먼저 당신은 당신의 것을 포장해야 합니다.header,footer그리고.#body의 상태가.#holderdiv:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
CSS
다음 럼세트그를 합니다.height: 100%html그리고.body(당신의 몸이 아니라, 몸이.#bodydiv)elements.div에 할 수 .
제이설정을 설정합니다.min-height: 100%에서.#holder div 래서그화내면용채사을우다용니합고의것그은▁div▁div▁and다▁use사▁screen니를 사용합니다.position: absolute 맨 #holder디브
당신은 게도깝신합, 은해야니다청당신안타합을 적용해야 .padding-bottom에▁#body div입니다.footer확실하게 하기 위해.footer내용 위에 있지 않습니다.
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
작업 예제, 짧은 본문: http://jsfiddle.net/ELUGc/
작업 예제, 긴 본문: http://jsfiddle.net/ELUGc/1/
방금 위와 같이 다른 솔루션을 위해 해결했습니다. 예를 들어 버그(어디선가 오류)가 있습니다.선택한 답변의 변동입니다.
html,body {
height: 100%
}
#nonFooter {
min-height: 100%;
position:relative;
/* Firefox */
min-height: -moz-calc(100% - 30px);
/* WebKit */
min-height: -webkit-calc(100% - 30px);
/* Opera */
min-height: -o-calc(100% - 30px);
/* Standard */
min-height: calc(100% - 30px);
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
position: relative;
}
HTML 레이아웃의 경우
<body>
<div id="nonFooter">header,middle,left,right,etc</div>
<div id="footer"></div>
</body>
음, 이 방법은 이전 브라우저를 지원하지 않지만 이전 브라우저가 바닥글을 보기 위해 30px 아래로 스크롤하는 것은 허용됩니다.
'다른 답변에 대한 답변'에 이를 사용하지 말라는 내용인 것은 알지만, 안타깝게도 적절한 답변에 의견을 추가할 수 있는 담당자가 부족합니다(!). 하지만...
만약 당신이 asp.net 에서 '내 머리가 아프다'의 답변에 문제가 있다면, 이것이 작동하기 위해서는 HTML 및 BOD 태그뿐만 아니라 메인 생성된 FOM 태그에 '높이: 100%'를 추가해야 합니다.
당신은 당신의 문을 닫지 않았습니다; 그 다음 위치: 절대.그렇지 않았다면 위의 코드가 완벽하게 작동했을 것입니다!
#footer {
position:absolute;
bottom:30px;
width:100%;
}
할 수 있다면 코멘트하고 싶지만, 아직 권한이 없기 때문에 일부 안드로이드 기기에서 예상치 못한 동작에 대한 힌트를 게시하겠습니다.
위치:Fixed는 다음 메타 태그를 사용하여 Android 2.1에서 2.3까지만 작동합니다.
<meta name="viewport" content="width=device-width, user-scalable=no">.
http://caniuse.com/ #search=position 참조
이는 뷰포트 높이에서 바닥글 높이를 뺀 최소 높이를 설정하는 뷰포트 명령을 사용하는 직관적인 솔루션입니다.
html,body{
height: 100%
}
#nonFooter{
min-height: calc(100vh - 30px)
}
#footer {
height:30px;
margin: 0;
clear: both;
width:100%;
}
position: fixed;
bottom: 0;
(if needs element in whole display and left align)
left:0;
width: 100%;
저는 저의 모든 주요 콘텐츠를 추가 div 태그(id="div")에 넣음으로써 비슷한 문제를 해결했습니다.그런 다음 ID="div"인 div 태그를 이 마지막 "div" div 태그 밖으로 이동했습니다.저는 CSS를 사용하여 "outer"의 높이를 지정하고 "footer"의 너비와 높이를 지정했습니다.저는 또한 CSS를 사용하여 "footer"의 여백 왼쪽과 여백 오른쪽을 auto로 지정했습니다.결과적으로 바닥글은 내 페이지의 하단에 단단히 고정되어 있고 페이지와 함께 스크롤됩니다(그러나 여전히 "외부" div 내부에 나타나지만, 주요 "내용" div 외부에 행복하게 나타나 있어 이상하게 보이지만, 내가 원하는 곳에 있습니다).
저는 단지 덧붙이고 싶습니다. 대부분의 다른 답변들은 저에게 잘 먹혔지만, 그것들을 작동시키는 데 오랜 시간이 걸렸습니다!
은 이는설이를 설정하기 입니다.height: 100%부모님의 키만 잡습니다!
따라서 전체 html(본문 내부)이 다음과 같이 보일 경우:
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
그러면 다음과 같이 하면 됩니다.
html,body{
height: 100%
}
#holder{
min-height: 100%;
position:relative;
}
#body{
padding-bottom: 100px; /* height of footer */
}
footer{
height: 100px;
width:100%;
position: absolute;
left: 0;
bottom: 0;
}
"홀더"가 "본체"에서 직접 높이를 선택합니다.
내 머리가 아프다, 누구의 대답이 내가 결국 일을 하게 된 것인지에 대한 찬사!
그런데.HTML이 전체 페이지의 요소일 뿐이거나 특정 열 내에 있기 때문에 더 중첩된 경우 포함된 모든 요소가 다음을 포함하는지 확인해야 합니다.height: 100%디브를 설정합니다.그렇지 않으면 "본체"와 "홀더" 사이에서 높이에 대한 정보가 손실됩니다.
예를 들어 다음과 같이 모든 div에 "풀 하이트" 클래스를 추가하여 높이가 머리글/몸통/바닥글 요소까지 내려가도록 했습니다.
<div class="full-height">
<div class="container full-height">
<div id="holder">
<header>.....</header>
<div id="body">....</div>
<footer>....</footer>
</div>
</div>
</div>
그리고 CSS에서 풀 하이트 클래스의 높이를 설정하는 것을 기억하십시오.
#full-height{
height: 100%;
}
그것이 내 문제를 해결했습니다!
고정 높이 바닥글(예: 712피트)이 있는 경우 다음과 같은 js를 사용하여 이 작업을 수행할 수 있습니다.
var bgTop = 0;
window.addEventListener("resize",theResize);
function theResize(){
bgTop = winHeight - 712;
document.getElementById("bg").style.marginTop = bgTop+"px";
}
저는 여백 상단으로 바닥글을 눌렀습니다: 자동입니다. 그리고 그것은 속임수를 썼습니다!나중에 방문하는 사람들에게 도움이 될 수도 있을 것 같아서 여기에 말씀드립니다.
언급URL : https://stackoverflow.com/questions/8824831/make-div-stay-at-bottom-of-pages-content-all-the-time-even-when-there-are-scrol
'programing' 카테고리의 다른 글
| 동일한 로그 파일에 추가되는 표준 및 오류 출력의 리디렉션 (0) | 2023.08.13 |
|---|---|
| 파워셸에 디렉터리를 재귀적으로 나열 (0) | 2023.08.13 |
| jQuery를 사용하여 선택한 확인란의 값을 가져옵니다. (0) | 2023.08.13 |
| 도커: 이미 만든 컨테이너에 다시 시작 정책 추가 (0) | 2023.08.13 |
| MariaDB Java Client 1.5.7이 JDBC 4.2와 호환됩니까? (0) | 2023.08.13 |