div를 페이지 맨 아래로 내림

div의 "book_button"이 바닥 글 위의 페이지 하단에 표시되지 않는 이유를 알아 냈습니다. 주 래퍼 div 있고 콘텐츠 div 있습니다. book_button을 content div 외부의 상대적 위치에 배치했습니다. 꿈을 꾸는 위버 디자인 창에서 내가 원하는 곳을 보여줍니다. 내가 브라우저에서 볼 때 여기div를 페이지 맨 아래로 내림

#Wrapper { 
    margin-top:0; 
    margin-right: auto; 
    margin-left: auto; 
    position: relative; 
    background-color: #ebebeb; 
    padding: 0px; 
    width: 100%; 
    top: 75px; 
} 
#Header { 
    background-color: #b2b85c; 
    height: 75px; 
    width: 100%; 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
    z-index: 999; 
    border-bottom-width: 3px; 
    border-bottom-style: solid; 
    border-bottom-color: #FFF; 
} 
#Content { 
    width: 900px; 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
} 
#Left_Side { 
    padding: 10px; 
    width: 485px; 
    clear: left; 
    float: left; 
} 
#Right_Side { 
    width: 340px; 
    position: relative; 
    display: inline; 
    float: right; 
    margin-left: 20px; 
    margin-bottom: 10px; 
    padding-left: 35px; 
    height: 100%; 
} 
#Footer { 
    background-color: #BCC271; 
    height: 15px; 
    width: 100%; 
    text-align: center; 
    padding-top: 15px; 
    padding-bottom: 10px; 
    font-family: Arial, Helvetica, sans-serif; 
    font-size: 12px; 
    color: #FFF; 
    float: left; 
    position: relative; 
} 
/* Navigation*/ 
.nav-wrap { 
    position: relative; 
    margin-right: auto; 
    margin-left: auto; 
    width: 900px; 
    padding-left: 15px; 
    padding-top: 31px; 
} 
ul#navlist 
{ 
    margin-left: 0; 
    padding-left: 0; 
    white-space: nowrap; 
} 

#navlist li 
{ 
    display: inline; 
    list-style-type: none; 
} 

#navlist a { 
    font-family: "Times New Roman", Times, serif; 
    font-size: 18px; 
    padding-top: 3px; 
    padding-right: 20px; 
    padding-bottom: 8px; 
    padding-left: 20px; 
} 

#navlist a:link, #navlist a:visited 
{ 
    color: #fff; 
    background-color: #b2b85c; 
    text-decoration: none; 
    border-left-width: 1px; 
    border-left-style: dotted; 
    border-left-color: #FFF; 
} 

#navlist a:hover 
{ 
    color: #fff; 
    background-color: #b2b85c; 
    text-decoration: none; 
    background-image: url(../GreyRiver/Images/pointer.jpg); 
    background-repeat: no-repeat; 
    background-position: 50% bottom; 
} 
.border-none{ 
    border-top-style: none; 
    border-right-style: none; 
    border-bottom-style: none; 
    border-left-style: none;  
    } 
/*End of Navigation*/ 
#header_img{ 
    height: 250px; 
    width: 900px; 
    position: relative; 
    background-image: url(../GreyRiver/Images/Fly_fishing_header.jpg); 
    margin-top: 10px; 
    margin-bottom: 25px; 
} 
#book_button{ 
    position: relative; 
    margin-top: 0px; 
    margin-right: auto; 
    margin-bottom: 0px; 
    margin-left: auto; 
    text-align: center; 
}

내가 그것을 알아 냈어는 CSS가 너무

http://kerrydean.ca/GreyRiver/fly_fishing.html

처럼 diplays.

footer 바로 앞에 book_button div를 넣습니다. 너비 100 %, 위치 : 상대 값을 지정하고 부동 소수점을 추가하십시오. 왼쪽

어쨌든 고마워요!

출처

2011-11-30 Greg

출처를 살펴보면 #book_button의 위치는 절대적인 상대가 아닙니다. – Boone

1) position:relative

2) 할 #Wrapper #book_button position:absolute을 확인, 이것은 아마 가장 좋은 방법이 아닙니다 bottom:40px;right:200px;

출처

2011-11-30 19:41:25

감사하지만 그 대답은 – Greg

입니다. 아마 위치 값을 조정하는 것일뿐입니다. –

위치 절대 값은 페이지의 콘텐츠가 아닌 브라우저 창의 아래쪽에서 40 픽셀을 수행합니다. – Boone

을 설정,하지만 당신은 어디를 버튼을 아래로 밀어 top 스타일 속성을 사용할 수 있습니다 원하는. 페이지의 내용이 정적 인 것처럼 보입니다. 즉, 페이지가로드 될 때마다 동적으로 버튼을 배치 할 필요가 없습니다. 따라서 하드 코딩 된 값으로 위치를 지정할 수 있습니다.

출처

2011-11-30 19:46:04 Ian

@Diodeus의 대답은 아마도 더 좋을 것입니다.하지만 네 사건의 입장을 하드 코딩하는 것은 아마도 길 일 것입니다. – Ian

감사합니다. 그러나이 옵션은 나에게도 효과가 없을 것입니다. 나는 콘텐츠 div doesnt가 book_button div 바로 아래에있는 이유에 대해 의아해했다. 포장지 안에 아직도 있습니까? 나는 당황 스럽다. – Greg

현재보기 소스를 가져 와서 #book_button을 상대적으로 다시 변경하여 바닥 글과 콘텐츠 사이에 표시합니다. 상대를 절대로 변경하면 절대 작동하지 않습니다.

출처

2011-11-30 20:42:06 Boone

div를 페이지 맨 아래로 내림

답변

관련 문제