바닥 글을 아래쪽으로 이동하려고 시도했습니다.

목표 : 페이지의 공백 아래에 가운데 맞춤 바닥 글 탐색.바닥 글을 아래쪽으로 이동하려고 시도했습니다.

안녕 얘들 아, 내 꼬리말을 페이지의 맨 아래로 이동하려고합니다. 내비게이션 및 이미지가 올바르게 표시되지만 바닥 글이 맨 위에 머물기를 원합니다.

이전의 문제는 모든 브라우저에서 로고의 오른쪽 상단에 표시되는 탐색을 얻는 것이 었으므로 이제 바닥 글의 가운데에 위치하도록이 바닥 글이 필요하다는 것을 수정했습니다. 여기

코드입니다 :

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>Untitled Document</title> 
    <style type="text/css"> 
     ... 
    </style> 
    <link href="style2.css" rel="stylesheet" type="text/css"> 
</head> 
<body> 
<div id="bg"> 
    <img style="display:block;" src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0015/1/-/-/-/-/Background_Gradient.png"> 
</div> 
<div id="main"> 
<div id="header"> 
    <div id="top-left"><img src="http://cdn-ci53.actonsoftware.com/acton/attachment/8908/f-0019/1/-/-/-/-/Medata%20With%20Sub%20550x131.png" atl="Logo" class="logo" alt="Visit Medata Home Page"> 
    </div> 

    <div id="nav"> 
    <ul> 
     <li>NewsWorthy</li> 
     <li>Solutions</li> 
     <li>About Us</li> 
     <li>Home</li> 
    </ul> 
    </div> 
</div> 

<div id="acton"> 
</div> 
<div id="footer"> 
    <ul> 
     <li>NewsWorthy</li> 
     <li>Solutions</li> 
     <li>About Us</li> 
     <li>Home</li> 
    </ul> 
</div> 
</div> 
</body> 
</html>

는 CSS

//!--My Custom CSS--!// 
    body { 
     margin:0; padding:0; 
    } 
    html, body, #bg { 
     height:100%; 
     width:100%; 
    } 
    #bg { 
     position:absolute; 
     left:0; 
     right:0; 
     bottom:0; 
     top:0; 
     overflow: hidden; 
     background-repeat: inherit; 
     z-index:-1; 
     padding-bottom: 25px; 
    } 
    #bg img { 
     width:100%; 
     min-width:100%; 
     min-height:100%; 
    } 
    #content { 
     z-index:1; 
     overflow: auto; 
    } 
    #main 
    { 
     margin: auto !important; 
     visibility: visible !important; 
     -webkit-border-radius: 5px !important; 
     -webkit-box-shadow: 0px 0px 20px #000 !important; 
     -webkit-box-sizing: content-box !important; 
     -moz-box-shadow: 0px 0px 20px #000 !important; 
     box-shadow: 0px 0px 20px #000 !important; 
     background-color: #fff; 
     width: 900px; 
     margin-left: auto; 
     margin-right: auto; 
    } 
#top-left { 
    float: left; 
    display: block; 
} 
#top-left img { 
    height: 73px; 
    width: 329px; 
    padding-left: 20px; 
    padding-top: 20px; 
} 

#nav { 
    margin: 0; 
    padding: auto; 
} 
#nav ul { 
    display: table-row; 
    float: right; 
} 
#nav li { 
    background: #043d70; 
    color: white !important; 
    padding: 8px 20px; 
    display: inline; 
    border-radius: 3px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-transform: uppercase; 
    font-weight: 600; 
    font-size: 12px; 
    margin: 20px 8px 0px 0px; 
    text-align: center; 
    float: right; 
} 
#nav li:hover { 
    text-decoration: none; 
    background: #43434A; 
} 
#nav li a { 
    color: #fff; 
    font-size: 12px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
} 
#main { 
    height: 100%; 
} 
#footer { 
    width: 100%; 
    height: 100%; 
    display: table-row; 
    } 
#footer ul { 
    display: block; 
    position: absolute; 
    clear: both; 
} 
#footer li { 
    background: #043d70; 
    color: white !important; 
    padding: 8px 20px; 
    display: inline; 
    border-radius: 3px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-transform: uppercase; 
    font-weight: 600; 
    font-size: 10px; 
    margin: 20px 8px 0px 0px; 
    text-align: center; 
} 
#footer li:hover { 
    text-decoration: none; 
    background: #43434A; 
} 
#footer li a { 
    color: #fff; 
    font-size: 12px; 
    font-family: Tahoma, Geneva, sans-serif; 
    text-decoration: none; 
} 
//!--End My Custom CSS --! //

출처

2014-02-14 Misterizzo

http://www.cssstickyfooter.com/ – dezman

show us jsfiddle please – Jatin

나는 이것이 당신이 원하는 생각을하다

http://jsfiddle.net/hsh5c/

#footer { 
     height: 50px; 
     position:absolute; 
     bottom:0px; 
     left:0px; 
     width:100%; 
    } 

#footer ul { 
    position:relative; 
    width: 400px; 
    margin-left:-200px; 
    left:50%; 
}

출처

2014-02-14 00:14:54 user1534664

감사합니다. 나는 그 일을하는 방법을 이해하기 시작하지 않았다. 매우 감사 :) :) :) – Misterizzo

바닥 글을 아래쪽으로 이동하려고 시도했습니다.

답변

관련 문제