바닥 글 내용이 페이지 하단에 겹칩니다.

페이지 하단에 머물도록 내 꼬리말이 있습니다. 그러나 내용이 겹쳐서 멈추지 않습니다.바닥 글 내용이 페이지 하단에 겹칩니다.

나는 인터넷을 통해 모든 해결책을 찾았으며 아무 것도 작동하지 않습니다. 나는 div 등을 주변으로 옮길 필요가 있지만 나는 잘못 될 수 있다는 느낌이 들었다. 여기

내 코드입니다 :

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <link href="https://fonts.googleapis.com/css?family=Concert+One" rel="stylesheet"> 
    <link href="https://fonts.googleapis.com/css?family=Eczar" rel="stylesheet"> 
    <link rel="stylesheet" href="style/stylesheet.css"> 
    <title>Layout</title> 
</head> 
<body> 
    <div id="header"> 
     <img src="img/top-bar/bar.png" height="10px" class="top"> 
     <ul id="menu-bar"> 
      <li><a href="#header" class="smoothScroll">Home</a></li> 
      <li><a href="#first" class="smoothScroll">Page 1</a></li> 
      <li class="dropdown"> 
       <a href="#" class="dropbtn">Page 2</a> 
       <div class="dropdown-content"> 
        <a href="#">Drop 1</a> 
        <a href="#">Drop 2</a> 
       </div> 
      </li> 
      <li><a href="#">Page 3</a></li> 
      <li><a href="#">Login</a></li> 
     </ul> 
     <img src="img/archery-1839284.jpg" class="cover"> 
    </div> 
    <div id="wrapper"> 
     <div id="content"> 
      <div id="first" class="item"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime distinctio sed officia, nam iure quam necessitatibus nobis non, aut quaerat autem. Quam mollitia, fugiat amet veritatis, voluptate earum quidem et! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci ex earum impedit ipsum consequatur dolor doloremque eum. Sed fugit dolor maiores pariatur nesciunt iste cupiditate consequuntur, dolore alias numquam voluptatum! 
       </p> 
      </div> 
      <div id="img-span"> 
       <img src="img/board-911636.jpg" class="wide"> 
      </div> 
      <div class="item" style="background-color: red;"> 
       <p class="para"> 
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem sit non ipsam aut perferendis neque magnam deleniti, officia necessitatibus porro odio ipsum est eum aliquam nulla placeat, deserunt? Atque, nisi. 
       </p> 
      </div> 
     </div> 
     <div id="footer"> 
      <img src="img/top-bar/bar.png" height="10px" class="bottom"> 
     </div> 
    </div> 
</body> 
</html>

CSS :

body { 
    background-color: grey; 
    margin: 0; 
    padding: 0; 
    font-family: 'Eczar', serif; 
    scroll-behavior: smooth; 
} 

#header { 
    position: relative; 
    text-align: center; 
} 

.top { 
    position: fixed; 
    width: 100%; 
    z-index: 3000; 
    left: 0; 
    top: 0; 
} 

.bottom { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
} 

#wrapper { 
    padding: 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 

.cover { 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    max-width: 100%; 
    background-image: url(../img/archery-1839284.jpg); 
    overflow: hidden; 
} 

#content { 
    width: 100%; 
    top: 100%; 
    height: 100%; 
    position: relative; 
    background-color: blue; 
    text-align: center; 
} 

.item { 
    padding-left: 20%; 
    padding-right: 20%; 
    padding-top: 4px; 
    padding-bottom: 4px; 
    overflow: hidden; 
    margin: 0; 
    position: relative; 
} 

.item p { 
    font-size: 18px; 
} 

.img-span { 
    padding: 0; 
    margin: 0; 
    width: 100%; 
    position: relative 
} 

.wide { 
    width: 100%; 
    height: 100%; 
    opacity: 1; 
    overflow: hidden; 
    display: block; 
} 

#footer { 
    width: 100%; 
    height: 70px; 
    background-color: greenyellow; 
    z-index: 3000; 
    bottom: 0; 
    left: 0; 
    position: absolute; 
    clear: both; 
}

출처

2017-03-07 ArcherBoy27

#footer를 position : relative로 설정하면됩니다. 중복되는 문제를 해결할 것입니다.

#footer { 
width: 100%; 
height: 70px; 
background-color: greenyellow; 
position: relative; 
clear: both; }

하지만 당신은 항상 큰 또는 작은 내용으로, 페이지 하단에 부착하는 바닥 글을 만드는 방법에 대해 설명합니다 다음 웹 사이트를 살펴 있어야합니다. 이것은 훨씬 더 좋은 방법이 될 것입니다.

문제 당으로

http://www.cssstickyfooter.com/using-sticky-footer-code.html

출처

2017-03-07 11:12:14

고마워요. 나는 그 하하를 시도하지 않았다는 것을 믿을 수 없다 : D – ArcherBoy27

나는 당신이 그것을가는 방법이 최선이라고 생각하지만 귀하의 경우 일 것이다 것은 변경하지 않습니다 래퍼 클래스는 바닥 글 높이와 동일한 아래쪽 패딩을 추가합니다.

#wrapper { 
    padding: 0 0 10px 0; 
    margin: 0; 
    position: absolute; 
    width: 100%; 
    margin-top: 100%; 
} 
#footer { 
    height:10px; 
}

출처

2017-03-07 11:09:49

당신이 당신의 페이지 오른쪽 하단에 바닥 글을 스틱 싶어? 그래서, 당신은 다음과 같은 CSS 코드를 넣어야 만합니다

html { 
position: relative; 
min-height: 100%; 
} 

body { 
margin-bottom:70px; 
}

출처

2017-03-07 11:13:57 Nishant

바닥 글 내용이 페이지 하단에 겹칩니다.

답변

관련 문제