CSS : 하단 및 중앙에 고정

CSS : 하단 및 중앙에 고정

---

바닥 글을 페이지 하단에 고정하고 중앙에 배치해야합니다. 바닥 글의 내용은 항상 변경 될 수 있으므로 margin-left를 통해 중앙에 놓을 수는 없습니다. xxpx; 여백-오른쪽 : xxpx;

문제는 어떤 이유로 이것이 작동하지 않는다는 것입니다.

#whatever {
  position: fixed;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
}

나는 웹을 크롤링했지만 아무것도 찾지 못했습니다. 컨테이너 div와 nada를 만들어 보았습니다. 나는 다른 조합과 장식을 시도했습니다. 어떻게해야할까요?

감사

---

다음과 같은 고정 바닥 글 솔루션을 사용해야합니다.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

이와 같은 다른 것들이 있습니다.

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

html로 :

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

---

Daniel Kanis의 수정 된 코드 :

CSS에서 다음 줄을 변경하십시오.

.problem {text-align:center}
.enclose {position:fixed;bottom:0px;width:100%;}

그리고 html에서 :

<p class="enclose problem">
Your footer text here.
</p>

---

jQuery 솔루션

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    // hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

때로는 오래된 CSS를 해킹하는 것보다 JS를 구현하는 것이 더 쉽습니다.

http://jsfiddle.net/gLhEZ/

---

문제는 position: static. 정적은 위치에 대해 아무것도하지 않는다는 것을 의미합니다. position: absolute당신이 원하는 것입니다. 요소를 중앙에 배치하는 것은 여전히 ​​까다 롭습니다. 다음이 작동합니다.

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 0px;
  right: 0px;
}

또는

#whatever {
  position: absolute;
  bottom: 0px;
  margin-right: auto;
  margin-left: auto;
  left: 50%;
  transform: translate(-50%, 0);
}

하지만 첫 번째 방법을 추천합니다. 나는이 답변에서 센터링 기술을 사용했습니다 : 절대 위치 요소를 div에 센터링하는 방법은 무엇입니까?

---

두 가지 잠재적 인 문제가 있습니다.

1-IE는 이전에 위치 : 고정에 문제가있었습니다. 유효한 doctype 또는 비 IE 브라우저와 함께 IE7 +를 사용하는 경우 이것은 문제의 일부가 아닙니다.

2 - You need to specify a width for the footer if you want the footer object to be centered. Otherwise it defaults to the full width of the page and the auto margin for the left and right get set to 0. If you want the footer bar to take up the width (like the StackOverflow notice bar) and center the text, then you need to add "text-align: center" to your definition.

---

I have encased the 'problem div in another div' lets call this div the enclose div... make the enclose div in css have a width of 100% and postion fixed with a bottom of 0... then insert the problem div into the enclose div this is how it would look

#problem {margin-right:auto;margin-left:auto; /*what ever other styles*/}
#enclose {position:fixed;bottom:0px;width:100%;}

then in html...

<div id="enclose">
    <div id="problem">
    <!--this is where the text/markup would go-->
    </div>
</div>

There ya go!
-Hypertextie

---

Based on the comment from @Michael:

There is a better way to do this. Simply create the body with position:relative and a padding the size of the footer + the space between content and footer you want. Then just make a footer div with an absolute and bottom:0.

I went digging for the explanation and it boils down to this:

• By default, absolute position of bottom:0px sets it to the bottom of the window...not the bottom of the page.
• Relative positioning an element resets the scope of its children's absolute position...so by setting the body to relative positioning, the absolute position of bottom:0px now truly reflects the bottom of the page.

More details at http://css-tricks.com/absolute-positioning-inside-relative-positioning/

---

here is an example using css grid.

html, body{
    height: 100%;
    width: 100%;
}
.container{
    height: 100%;
    display:grid;
    /*we divide the page into 3 parts*/
    grid-template-rows: 20px auto  30px;
    text-align: center;   /*this is to center the element*/ 
    
}

.container .footer{
    grid-row: 3;   /*the footer will occupy the last row*/
    display: inline-block;
    margin-top: -20px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <div class="container">
        <div class="header">

        </div>
        <div class="content">

        </div>
        <div class="footer">
            here is the footer
        </div>
    </div>
</body>
</html>

you can use css grid:a concrete example

참고URL : https://stackoverflow.com/questions/971123/css-fixed-to-bottom-and-centered