페이지 하단의 바닥 글

페이지 하단에 바닥 글을 넣으려고합니다.페이지 하단의 바닥 글

내 HTML 문제는 회색 바닥 글이 섹션에서 중간에 남아 있다는 것입니다

* { 
    margin: 0; 
    padding: 0; 
} 

html, body, #main { 
    height: 100%; 
} 

html, body, #main_header, nav, ul, footer { 
    width: 100%; 
} 

#main { 
    position: relative; 
    margin: 0 auto; 
    width: 1100px; 
} 

#main__header { 
    position: relative; 
    height: 180px; 
    margin: 0 auto; 
    background-color: #ff532a; 
} 

#logo { 
    position: relative; 
    top: 5px; 
    left: 20px; 
    border: 1px solid #fff; 
    width: 206px; 
    height: 75px; 
} 

#search { 
    position: absolute; 
    top: 5px; 
    right: 20px; 
} 

nav { 
    position: absolute; 
    bottom: 10px; 
} 

ul { 
    display: block; 
    list-style-type: none; 
    clear: right; 
    width: 1061px; 
    margin: 0 auto; 
} 

nav ul li { 
    display: block; 
    width: 209px; 
    float: left; 
    margin-left: 4px; 
} 

#home { 
    margin-left: 0px !important; 
} 

nav ul li a { 
    display: block; 
    text-align: center; 
    text-decoration: none; 
    color: #fff; 
    font-size: 1.4em; 
    height: 35px; 
    padding: 5px; 
    border: 1px solid #fff; 
    border-radius: 8px; 
} 

#body__section { 
    width: 100%; 
    height: 100%; 
    padding-bottom: 20px; 
} 

#left__section { 
    width: 810px; 
    height: 100%; 
    float: left; 
} 

#right__section { 
    width: 250px; 
    height: 100%; 
    float: right; 
    border-top: 1px solid #d2d3d2; 
} 

.margin__section { 
    margin-top: 30px; 
} 


article { 
    position: relative; 
    border-top: 1px solid #d2d3d2; 
    border-bottom-width: thin; 
    height: 230px; 
    width: 100%; 
} 

section article img { 
    margin: 30px; 
} 

section article div { 
    position: absolute; 
    top: 30px; 
    right: 0px; 
    width: 550px; 
    height: 170px; 
    background-image: url('images/article.jpg'); 
} 

.border__solid { 
    border: 1px solid #000; 
} 

#right__section aside { 
    width: 100%; 
    margin-top: 30px; 
} 

#social { 
    height: 50px; 
    background-color: #e7e8e7; 
} 

.ad { 
    height: 377px; 
    background-color: #ffffa1;  
} 

footer { 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
}

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <link rel="stylesheet" type="text/css" href="style.css" /> 
    </head> 

    <body> 
    <div id="main"> 
     <header id="main__header"> 
     <div id="logo"></div> 
     <div id="search"> 
      <form> 
      <input type="text" value="Search..." /> 
      </form> 
     </div> 

     <nav> 
      <ul> 
      <li id="home"><a href="#">Home</a></li> 
      <li id="about"><a href="#">About Us</a></li> 
      <li id="carrers"><a href="#">Carrers</a></li> 
      <li id="newsletter"><a href="#">Newsletter</a></li> 
      <li id="contact"><a href="#">Contact</a></li> 
      </ul> 
     </nav> 
     </header> 

     <section id="body__section"> 

     <section id="left__section" class="margin__section"> 
      <article id="news1"> 
      <img src="images/pic.jpg" width="200" height="170" alt="pic1" /> 
      <header> </header> 
      <div> 
       <p> </p> 
      </div> 
      </article> 

      <article id="news2"> 
      <img src="images/pic.jpg" width="200" height="170" alt="pic2" /> 
      <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 

      <article id="news3"> 
       <img src="images/pic.jpg" width="200" height="170" alt="pic2" /> 
       <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 

      <article id="news4"> 
       <img src="images/pic.jpg" width="200" height="170" alt="pic3" /> 
       <header> </header> 
       <div> 
       <p> </p> 
       </div> 
      </article> 
      </section> 

      <section id="right__section" class="margin__section"> 
      <aside id="social"></aside> 
      <aside class="ad"></aside> 
      <aside class="ad"></aside> 
      </section> 

     </section> 

     <footer> </footer> 

     </div>  
    </body> 
    </html>

내있는 style.css. 바닥 글이 고정되어 있지 않고 페이지 하단에 실제로 있기를 원합니다.

screenshot

출처

2017-03-18 anon123

바닥 글에'position : absolute'을 추가하려고 시도하십시오 – mickdev

절대 위치로 여러 버전을 시도했지만 그 중 아무 것도 작동하지 않았습니다. – anon123

이러한 변경으로 인해 문제가 해결됩니다.

#main { 
    position: relative; 
    margin: 0 auto; 
    height: auto; //changing to auto 
    width: 1100px; 
} 

footer { 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
    position: relative; //changing to relative 
    clear: both; //clearing previous divs 
}

희망이 도움이되었습니다.

출처

2017-03-18 15:53:22 Mark

반갑습니다. 답변으로 표시하십시오! – Mark

당신이 가진 요소를 추가해야합니다 "명확 : 모두"당신의 용기 섹션 내부에있는 두 개의 부동 섹션 후. 그런 다음 컨테이너 섹션에서 "높이 : 100 %"를 제거해야합니다.

그래서, 당신의 CSS에 추가 : 그냥 "body__section"이 끝나기 전에,

#body__section { 
    width: 100%; 
    height: auto; 
    padding-bottom: 20px; 
}

그리고 당신의 HTML에 추가 :

.clear { 
    clear: both; 
}

가로 "#body__section"로 변경

<div class="clear"></div>

출처

2017-03-18 15:32:38

이 작품! 감사! – anon123

나는이 CSS를 사용하는 것이 좋습니다 ...

#main { 
    position: relative; 
    margin: 0 auto; 
    width: 1100px; 
    min-height: 100%; 
    padding-bottom: 180px; 
} 
footer { 
    position: absolute; 
    left: 0px; 
    right: 0px; 
    bottom: 0px; 
    height: 180px; 
    background-color: #beb0ff; 
}

... 그리고이 규칙의 밖으로의 주요 요소를 가지고 : 그래서

html, body { 
    height: 100%; 
}

된다

html, body, #main { 
    height: 100%; 
}

그러면 바닥 글이 의 자식이되고 하단에는 절대적으로 padding-bottom on #main을 사용하여 겹침 (바닥 글의 높이와 같은 180 픽셀)을 방지하고 #main의 경우 min-height을 100 %로 설정하여 바닥 글이 높지 않은 페이지 하단에도 있는지 확인하십시오.

출처

2017-03-18 16:03:11 Johannes

작동하지 않았습니다. – anon123

페이지 하단의 바닥 글

답변

관련 문제