콘텐츠를 자바 스크립트

과 겹치는 CSS 바닥 글을 제어하므로 기본적으로 "body"의 높이와 div 클래스의 높이를 얻으려면 자바 스크립트를 사용합니다. 주 컨테이너는 "주 컨테이너"높이가 "몸체"높이보다 커서 원인이 충분합니다. Position : fixed; 속성을 ".footer-section"의 position : relative로 변경합니다. 따라서 내용이 겹치지 않고 페이지 끝에서 "사라집니다". 그러면 아래로 스크롤 할 때만 표시됩니다. 자바 스크립트 나 CSS 또는 어쩌면 둘 다 잘못하고 있는지 확실하지 않습니까?콘텐츠를 자바 스크립트

<body onresize="resizeFunction" onload="resizeFunction"> 

<div class="main-container"> 
<div class="row"></div> 
<div class="col-12"> 
Lorem ipsum dolor sit amet, (cut out due to length) 
</div> 
<div class="row"></div> 
<div class="col-12"> 
<div class="footer-section"></div> 
</div> 
</div> 
</body>

와 CSS : 여기

function resizeFunction() { 
var x = document.getElementsByTagName("body").offsetHeight; 
var y = document.getElementsByClassName("main-container").offsetHeight; 
var z = document.getElementsByClassName("footer-section"); 
if (x < y) { 
    z.className += "responsive"; 
} else { 
    z.className = "footer-section"; 
} 
}

내가 작업하고있는 HTML이다 : 여기 시작하는 https://jsfiddle.net/udsv4t4y/1/

는 자바 스크립트입니다 :

내가 함께 여기 jsfiddle을 던졌다 :

body { 
margin: 0; 
padding: 0; 
width: 100%; 
height: 100%; 
overflow: auto; 
font-family: "Tahoma", sans-serif; 
font-size: 16px; 
color: #454545; 
background-color: #fff; 
} 

.main-container { 
min-height: 100%; 
width: 100%; 
margin: 0; 
} 

.footer-section { 
position: fixed; 
bottom: 0; 
height: 60px; 
width: 100%; 
background: #428cd9; 
} 

.footer-section.responsive { 
position: relative; 
bottom: 0; 
height: 60px; 
width: 100%; 
background: #428cd9; 
} 

.row::after { 
content: ""; 
clear: both; 
display: block; 
} 

[class*="col-"] { 
float: left; 
} 

.col-12 {width: 100%;}

출처

2016-12-28 Daniel

훨씬 간단한 방법이 있습니다. 바로 min-height을 사용하십시오.

https://jsfiddle.net/e8ss46qw/1/

출처

2016-12-28 02:28:29 Quinn

아! 완벽하게 작동합니다! :) 대단히 감사합니다. – Daniel

바닥 글의 높이가 고정되어 있지 않고 60 픽셀 미만으로 떨어지면 약간 이상하게 작동합니다. – Deep

당신은 주요 컨테이너 메인 컨테이너의 높이가 너무 몸의 높이는 것 간다 따라서 경우 몸 안에 있기 때문에.

메인 컨테이너의 높이를 현재 창 높이로 확인해야합니다.

번째 문제는 document.getElementsByTagName과 document.getElementsByClassName이 기준을 만족하는 모든 요소의 노드리스트를 반환 요소

var x = document.getElementsByTagName("body").offsetHeight; 
var y = document.getElementsByClassName("main-container").offsetHeight; 
var z = document.getElementsByClassName("footer-section");

을 선택하는, 방법이다. 장난감 노드 목록에서 .offsetHeight 할 수 없습니다. 당신은 개별 노드를 het해야합니다.

이 경우 querySelector를 사용할 수 있습니다.

var x = document.querySelector("body").offsetHeight; 
var y = document.querySelector(".main-container").offsetHeight; 
var z = document.querySelector(".footer-section");

바이올린 : https://jsfiddle.net/k3qgc88j/

출처

2016-12-28 02:37:25 Deep

이것도 잘 부탁드립니다! 자바 스크립트에서 실수를 발견하는 것이 좋다! – Daniel

콘텐츠를 자바 스크립트

답변

관련 문제