바닥 글은 코딩되었지만 바닥에 붙어 있지 않습니다.

StackOverflow https://stackoverflow.com/questions/411228

  •  03-07-2019
  •  | 
  •  

문제

나는 바닥 글을 제거했는데, 사이트는 온라인으로 가야했다. 그래서 링크도 사라졌습니다.

보시다시피 (FF2와 IE7) 바닥 글은 화면 하단에 있지만 페이지 하단 (콘텐츠)에 있지 않습니다.

내 코드에 이것을 가지고 있습니다.

<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

그리고 이것은 CSS에서 :

html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;  /* height of the footer */
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    min-height: 100%;
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
    margin: 0;
}

또는 긴 이야기를 짧게 만들기 : 나는 주어진 지침을 따랐다. 여기.

도움이 되었습니까?

해결책

오른쪽, #Size가 100%안에있는 상태에서 패딩을 랩에서 제거하고 다음을 #Content에 추가하십시오.

overflow:auto;
padding-bottom:30px;

그런 다음 귀하의 링크는 FF에서 저를 위해 작동합니다

다른 팁

당신은 당신의 지시를주의 깊게 따르지 않았습니다. 열쇠 매튜의 레이아웃

<div id="container">
   <div id="header"></div>
   <div id="body"></div>
   <div id="footer"></div>
</div>

컨테이너는 위치가 있습니다. 그것은 서로 안에 배치됩니다. 컨테이너에는 바닥 글의 크기의 패딩 바닥을 예약하여 바닥 글 용 공간이 있습니다. 따라서 레이아웃은 바닥 글 높이가 고정 될 때만 작동합니다.

Botttom : 0 요소는 가장 가까운 상대적으로 배치 된 부모의 맨 아래에 배치됩니다. 아무것도 없으면 뷰포트가 대신 사용되며 레이아웃에서 일어나는 일입니다.

바닥 글 div는 랩의 자녀가 아닙니다.

어때 이 하나?

패딩을 몸의 바닥에서 #wrap의 바닥으로 이동하십시오. 바닥 글은 그 패딩으로 인해 "페이지"의 바닥에서 항상 30px입니다. #wrap에 올려 놓으면 #wrap의 내용이 바닥 글 뒤에 들어가는 것을 방지합니다.

    <style type="text/css">
html {
    height: 100%;
    margin: 0;
    padding: 0;
}
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
}
*#wrap {            /* IE hack */
height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    padding: 0;
}
</style>
<div id="wrap">
    <div id="top"></div>
    <div id="content"></div>
    <div id="footer"></div>
</div>

이것은 나를 위해 효과가있었습니다.

IMO, IE 스타 해킹이 문제를 일으킨다. IE 해킹을 다음과 같이 변경하십시오.

*html #wrap {
    ...
}

이 사이트에는 데모와 함께 좋은 기술이 있습니다. http://www.themaninblue.com/experiment/footerstickalt/

이 문제에 대한 다른 것이 있어야합니다. 위에서 설명한 모든 방법은 내 것이 아닌 다른 사이트에서 작동합니다.

이것은 내 페이지 소스이며, 관련이없는 것들이 제거되었습니다 (콘텐츠 및 물건).

<body>
    <div id="size"> javascript textsize modifier</div>
    <div id="wrap">

        <div id="top"> logoimage
            <div id="menu">
                <div id="menuwrapper">
                    <ul id="primary-nav">
                        <li> Homelink </li>
                        <li class="menuactive menuparent" class="over"> Link 2
                            <ul>
                                <li> Sublink 1 </li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                        <li class="menuparent" class="over"> Active Link 3
                            <ul>
                                <li> Sublink 1</li>
                                <!-- etcetera //-->
                            </ul>
                        </li>
                    </ul>
                </div> <!-- end menuwrapper //-->
            </div> <!-- end menu //-->
        </div> <!-- end top //-->

        <div id="content">
            <div id="newssnippet"></div>
            <div id="roundedright"> <!-- rounded corners //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="right">Random main content</div>
                <!-- 7 divs to create rounded corners //-->
            </div> <!-- end rounded corners //-->

            <div id="logo">Another logo</div>

            <div id="roundedleft"> <!-- rounded corners again //-->
                <!-- 6 divs to create rounded corners //-->
                <div id="left">News content</div> 
                <!-- 7 divs to create rounded corners //-->
            </div>  <!-- end rounded corners //-->
        </div> <!-- end content //-->

        <div id="footer"></div>

    </div><!-- end wrap //-->
</body>

분명히, 나는 처방 된 레이아웃을 따르고 있습니다. 오프닝 게시물에서 링크.

그런 다음 CSS에는 다음과 같습니다.

html {
    height: 100%;
    margin: 0;
    padding: 0;
} 
body {
    background: #e7e7e7 url(images/cms/background.jpg) repeat-x;
    font-family: Verdana, Arial, sans-serif;
    font-size: .8em;
    height: 100%;
    margin: 0;
    padding: 0;
    padding-bottom: 30px;
}
#wrap {
    margin-left: auto;
    margin-right: auto;
    width: 960px; 
    position: relative; 
    min-height:100%;
}
*html #wrap {     /* IE hack */
    height:100%;
}
#footer {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 30px;
    background: transparent url(images/cms/footer.png) no-repeat bottom center;
    padding: 0;
}
#footer p {
    margin: 0;
    padding: 0;
    padding-top: .7em;
    text-align: center;
}
#footer a {
    text-decoration: none;
}

그것은 모든 관련 비트 여야합니다 ...

내가 무엇을 놓치고 있습니까?

레코드의 경우 : 바닥 글은 내용이 100% 높으면 오른쪽 위치의 Oage 바닥에 달라 붙고 있습니다. 따라서 화면을 채우지 않으면
컨텐츠가 페이지의 100% 이상인 경우 바닥 글은 콘텐츠의 절반에 어딘가에 있으므로 모든 것을보기 위해 스크롤해야 할 때.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top