css - 바닥 글이 확장되지 않습니다.

Question

임 새 소식은 매우 새롭지 만 여전히 몇 가지 개념을 이해하는 것이 어렵습니다. 어쨌든, 내 문제는 컨테이너의 position: relative;을 설정하고 내 바닥 글 position: absolute; bottom: 0;의 바닥 글이 작아졌습니다. 그것은 그 코드를 놓기 전에 있어야하는 컨테이너와 같은 폭을 가졌습니다. 바닥 글이 컨테이너의 맨 아래 부분에 있기를 원했기 때문에 제가했습니다.

적갈색 바닥 글입니다 :

은 아래의 스크린 샷이다.

내 꼬리말에 div를 사용하지 않고 대신 html 요소 <footer>을 사용합니다.

내 CSS 코드 :

div#container { 
    height: 100%; 
    width: 1000px; 
    margin: auto; 
    background-color: #C9C9C9; 
    position: relative; 
} 

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
} 

도와주세요. 그건 당신이 https://developer.mozilla.org/samples/cssref/css-positioning.html

나는 또한 격려 도움이 될 수있는 경우

Answer 1

필자는 footer의 너비를 980px로 선언함으로써이를 올바르게 해결했습니다. 조사한 결과 mozilla와 webkit에 너비가있는 패딩이 포함되어 있지 않음을 알았 기 때문에 1000px를 시도했을 때 컨테이너보다 넓어졌습니다.

Answer 2

확인이, 당신은 몇 가지 DIV 컨테이너를 추가 그것은 약간의 높이를주고 불을 지르고 브라우저 또한 바닥 글 위의

에 설치되어 있어야합니다. 바닥 글이 바닥에 머무를 수 있도록합니다. 위치 지정을 명시 적으로 사용하지 마십시오. 새 기능이므로이 기능을 사용하지 마십시오.

가 자신에게 시간을 가져, 당신은 it..with CSS 위치의 상단에있을 것입니다 : -)

Answer 3

추가 폭 : 1000px; 바닥 글에

Answer 4

당신은 사용하고 있습니다; footer 만약

footer { 
    background-color: #340B09; 
    height: 50px; 
    position: absolute; 
    bottom: 0; 
} 

어떤 ID 또는 당신이 HTML5 요소 footer를 사용하는 경우 클래스, 그것은 #footer 또는 .footer 같은 CSS와 아무 문제에서 정의되어야한다.

요소를 채우기 위해 요소를 늘리려면 width: 100%을 사용하십시오. 바닥 글이 container 안에 있으면 이것을 꼬리말에 추가하십시오. 그렇지 않으면 화면으로 확장됩니다.

Answer 5

상대 위치 지정과 절대 위치 지정이 필요합니까? 그것이 페이지의 레이아웃이 화면의 모든 다른 크기에 대해 항상 같지 않을 것이라는 단점이 있기 때문에 나는 묻고있다.

바닥 글에 바닥 글을 표시하려고 했으므로 여기에서이 방법으로 끝낼 수 있습니다.

<style type='text/css'> 

body{ 
    margin: 0px; 
    padding: 0px; 
    background-color: black; 
} 

#inbody{   /* main page */ 
    padding-top: 10px; 
    margin-top: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    margin-bottom: 0px; 
    padding-bottom: 10px; 
    height: 1170px; 
} 

#container{   /*container */ 
    padding: 10px;   
    margin-top: 10px; 
    margin-left: 30px; 
    margin-right: 30px;  
    height: 1130px; 
    background-color: orange;   
} 

#header{   /* header */ 
    margin-left: 168px; 
    height: 51px; 
} 

#midbody{   /* middle body */ 
    margin: 10px; 
    padding: 0px; 
    height: 999px; 
} 

#footer{   /* footer */ 
    padding: 10px; 
    height: 30px; 
    background-color: black; 
} 

</style> 

또한 모든 부품의 색상을 변경하여 변경 사항을 볼 수 있습니다. 또한 웹 페이지의 HTML과 CSS를 보여주는 inspect 요소를 사용하십시오. 또한 상자 모델 개념을 위해 inspect 요소에서 메트릭을 실험 해보십시오.