바닥 글이 밑 부분에 표시되지 않습니다.

어떤 이유로 내 꼬리말이 페이지 중간에 떠 있습니다. 내 화를 몰고. 나는 그것의 단지 빠른 수정을 바란다. 필자는 온라인에서 보았고 모든 대답은 고정 된 꼬리말을 가리키는 것으로 보이고 작은 해상도에서는 끔찍하게 표시되기 때문에 필요하지 않습니다.바닥 글이 밑 부분에 표시되지 않습니다.

<!DOCTYPE html> 
<html> 
<head> 
    <title>MM Web Design</title> 
    <meta name="viewport" content="width=500, initial-scale=1"> 
    <link rel="stylesheet" href="css/style.css" /> 
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'> 
</head> 
<body> 
    <img class="logo" src="img/logo.png"> 
     <div class id="nav"> 
      <ul> 
      <li>Contact</li> 
      <li>About</li> 
      <li>Work</li> 
      <li>Home</li> 
     </ul> 
    <br> 
</div> 


<div class="wrapper"> 
    <h1>Welcome to my Portfolio</h1> 

    <p> 
     yada yada yada 
    </p> 

     <div class="row"> 
      <div class="side-bar"> 
       <h3> Recent Work </h3> 
       <p>Here's some of my latest work, covering web design, branding and identity.</p> 
       <a href="#">View the Portfolio &rarr;</a> 
      </div> 

     <div class="recent-wrap"> 
       <a href="#"><img src="img/body-metrix.png"></a> 
       <a href="#"><img src="img/body-metrix-logo.png"></a> 
       <a href="#"><img src="img/market.png"></a> 
     </div> 
     </div> 

<div class="footer-wrap"> 
    <div class="footer"> 
     <ul> 
      <li>Contact</li> 
      <li>About</li> 
      <li>Work</li> 
      <li>Home</li> 
     </ul> 

     </div> 
    </div> 


</body> 
</html>

CSS 것은

.footer-wrap{ 
    height:50px; 
    width:100%; 
    background:#333333; 
    margin: 0em; 
} 

.footer ul { 
    font-size: 18px; 
    font-weight: lighter; 
    list-style-type: none; 
    margin: 100px; 
    padding: 0; 
    text-decoration: none; 
} 

.footer ul li { 
    float: right; 
    display: block; 
    padding-left: 20px; 
    font-size: 0.75em; 
}

출처

2014-04-16 user3087394

CSS도 함께 넣으십시오. 정확히 무엇을 성취하려고합니까? 얼마나 많은 내용이 담겨 있든 상관없이 바닥 글이 페이지 하단에 붙어 있습니까? 작은 해상도에서는 끔찍한 표정을 짓지 않고도 그 중 하나를 만들 수 있습니다. – TylerH

@TylerH 페이지의 모든 부분을 뒤 따르기 위해 바닥 글이 필요합니다. 페이지 하단에 위치하므로 divs가 누락 된 것처럼 작동합니다. 지금은 페이지 중간에 떠 있습니다. – user3087394

흠 ... 어둠 속에서 쐈지 만 바닥 글 요소에'clear : both'를 추가해보십시오. –

대부분의 경우, 그냥 다른 div의 아래에 표시합니다.

끈끈한 바닥 글을 시도 하시겠습니까?

<div class="page-wrap"> 

    Content! 

    </div> 

    <footer class="site-footer"> 
    I'm the Sticky Footer. 
    </footer>

과 CSS

* { 
    margin: 0; 
    } 
    html, body { 
    height: 100%; 
    } 
.page-wrap { 
min-height: 100%; 
/* equal to footer height */ 
margin-bottom: -142px; 
} 
.page-wrap:after { 
content: ""; 
display: block; 
} 
.site-footer, .page-wrap:after { 
/* .push must be the same height as footer */ 
height: 142px; 
} 
.site-footer { 
background: orange; 
    }

출처

2014-04-16 16:15:37 Peege151

div의 그들이해야 정확히 행동입니까? 그리고 그들은 올바르게 주문됩니다. 위의 div에 내용을 채우면 바닥 글이 아래로 이동합니다 창 아래쪽에 머물고 싶으면 이미 제안 된 것처럼 끈적 거리 야합니다.

출처

2014-04-16 16:21:31 Intellidroid

바닥 글이 밑 부분에 표시되지 않습니다.

답변

관련 문제