CSS : 하단 및 중앙에 고정

Question 1

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

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

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

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

감사

Question 2

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

* {
    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>

Question 3

Daniel Kanis의 수정 된 코드 :

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

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

그리고 html에서 :

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

Question 4

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/

Question 5

문제는 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에 센터링하는 방법은 무엇입니까?

Question 6

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

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

2-바닥 글 개체를 중앙에 배치하려면 바닥 글 너비를 지정해야합니다. 그렇지 않으면 기본적으로 페이지의 전체 너비로 설정되고 왼쪽 및 오른쪽의 자동 여백은 0으로 설정됩니다. 바닥 글 막대가 너비를 차지하고 (StackOverflow 알림 막대와 같이) 텍스트를 중앙에 배치하려면 다음이 필요합니다. 정의에 "text-align : center"를 추가합니다.

Question 7

나는 '다른 div의 문제 div'를 둘러 쌌습니다.이 div를 enclose div라고 부르겠습니다 .css의 enclose div의 너비가 100 %이고 위치가 0으로 고정되도록 설정 한 다음 문제 div를 삽입합니다. 동봉 div 이것은 어떻게 보일 것입니다

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

그런 다음 html로 ...

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

됐어요!
- 하이퍼 텍스트

Question 8

@Michael의 의견을 바탕으로 :

이를 수행하는 더 좋은 방법이 있습니다. position : relative 및 바닥 글 크기의 패딩 + 원하는 콘텐츠와 바닥 글 사이의 간격을 사용하여 본문을 생성하기 만하면됩니다. 그런 다음 절대 및 bottom : 0으로 바닥 글 div를 만드십시오.

나는 설명을 위해 파고 들었고 다음과 같이 요약됩니다.

기본적으로 bottom : 0px의 절대 위치는 페이지 하단이 아닌 창 하단으로 설정됩니다.
요소의 상대 위치 지정은 자식의 절대 위치 범위를 재설정하므로 본문을 상대 위치로 설정하면 bottom : 0px의 절대 위치가 페이지 하단을 실제로 반영합니다.

자세한 내용은 http://css-tricks.com/absolute-positioning-inside-relative-positioning/에서

Question 9

다음은 CSS 그리드를 사용하는 예입니다.

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>

스 니펫 확장

CSS 그리드를 사용할 수 있습니다.

Question 10

나는 전형 position: fixed적이고 bottom: 0작동하지 않는 문제에 부딪쳤다. .NET으로 깔끔한 기능을 발견했습니다 position: sticky. "상대적으로"새로운 기능이므로 IE / Edge 15 및 이전 버전에서는 사용할 수 없습니다.

다음은 w3schools의 예입니다.

<!DOCTYPE html>
<html>
<head>
<style>
div.sticky {
  position: sticky;
  bottom: 0;
  background-color: yellow;
  padding: 30px;
  font-size: 20px;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est,  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dlerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas  dolor nteger frinegestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas </p>

<div class="sticky">I will stick to the screen when you reach my scroll position</div>

</body>
</html>

스 니펫 확장