div 바닥글 태그의 CSS 구현은 페이지 하단에 고정되어 있습니다.

웹페이지의 "바닥글" 부분은 떠서 페이지 중앙에 위치하는데, 이는 시각적 효과에 큰 영향을 미치고 페이지를 보기 흉하게 보이게 합니다. 특히 와이드스크린이 점점 더 많아지는 상황에서 이러한 현상은 더욱 그렇습니다. 이 기사에서는 두 가지 해결 방법을 소개합니다. 자세한 내용이 필요한 친구는 이를 참조할 수 있습니다.

페이지로 이동하면 HTML 페이지에 콘텐츠가 덜 포함되면 "바닥글" 부분이 떠오릅니다. 이는 시각적 효과에 큰 영향을 미치고 페이지를 보기 흉하게 보이게 합니다. 특히 요즘에는 와이드스크린이 많아지면서 이러한 현상이 더욱 심각해졌습니다. 그렇다면 웹페이지의 "바닥글" 부분을 페이지 하단에 영원히 고정하는 방법은 무엇일까요? 먼저 아래 코드를 살펴보겠습니다
이것이 첫 번째 해결 방법입니다, 더 많은
HTML 코드가 있습니다

코드는 다음과 같습니다.

<p class="container"> 
<p class="header">这是头部</p> 
<p class="page clearfix"> 
<p class="left">left sidebar</p> 
<p class="content">main content</p> 
<p class="right">right sudebar</p> 
</p> 
<p class="footer">footer section</p> 
</p>

CSS 코드

코드는 다음과 같습니다.

html,body{margin:0;padding:0;height:100%} 
.container{min-height:100%;height:auto !important;height:100%;/*ie6不识别min-height,如上述处理*/position:relative;} 
.header{background:#ff0;padding:10px;} 
.page{width:960px;margin:0 auto;
padding-bottom
:60px;/*padding等于footer的高度*/} 
.footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;} 
.left{width:220px;height:800px;float:left;
margin-right
:20px;background:lime;} 
.content{background:orange;width:480px;float:left;margin-right:20px;} 
.right{width:220px;float:right;background:green;} 
.clearfix:after, 
.clearfix:before{content:"";display:table} 
.clearfix:after{clear:both;overflow:hidden} 
.clearfix{zoom:1;}

이 바닥글을 페이지 하단에 영원히 고정하려면 4개의 p만 필요하며, 그 중 p#container는 컨테이너입니다. 이 컨테이너에는 p#header(헤더), p#page(페이지의 주요 부분)가 포함됩니다. , 위 코드와 같이 p에 더 많은 p 구조를 추가할 수 있습니다. p#footer(바닥글 부분)
이 메소드의 구현 원리를 살펴보겠습니다.
html 및 body 태그에서 높이(높이)를 "100%"로 설정해야 컨테이너의 높이 백분율을 설정할 수 있습니다. 동시에 html 및 body의 여백과 패딩을 제거해야 합니다. 즉, html과 본문의 여백과 패딩은 모두 0입니다.

p#container 컨테이너: p#container 컨테이너는 최소 높이(min-height)를 100%로 설정해야 합니다. 100% 높이의 콘텐츠가 거의(또는 전혀) 없을 때 기능을 유지하지만 IE6에서는 최소 높이가 지원되지 않으므로 IE6과 호환되기 위해서는 최소 높이에 대한 특정 호환성 처리를 수행해야 합니다. 자세한 내용은 이전 코드를 참조하세요. 또한 p#container 컨테이너에도 추가해야 합니다. 절대 위치 지정 후에 내부 요소가 p#container 컨테이너를 벗어나지 않도록 설정하세요. ;
p#page 컨테이너: p#page 컨테이너에는 이 컨테이너에 설정해야 하는 매우 중요한 설정이 있습니다. padding-bottom 값을 설정하고 이 값은 높이(높이)와 같거나 약간 커야 합니다. p#footer의 값은 물론 p#page에서 padding-bottom을 대체하기 위해 border-bottom human water-width를 사용할 수 있지만 한 가지 주의할 점은 padding 대신 margin-bottom을 사용하면 안 된다는 것입니다. - 여기 아래, 그렇지 않으면 효과가 달성되지 않습니다.

p#footer 컨테이너: p#footer 컨테이너는 고정 높이를 설정해야 하며 단위는 px(또는 em)입니다. p#footer도 절대 위치에 설정하고 하단:0으로 설정해야 합니다. 그러면 앞서 언급한 효과를 얻을 수 있도록 p#footer가 컨테이너의 하단에 고정되어야 합니다. p#footer는 컨테이너 p#container의 하단에 고정됩니다(p#container가 min-height:100%를 설정하기 때문에). 콘텐츠 높이가 화면 높이를 초과하면 p#footer가 됩니다. 또한 p#container의 하단, 즉 페이지 하단에 고정됩니다. p#footer에 "width:100%"를 추가하여 전체 페이지로 확장할 수도 있습니다.
기타 p: 다른 컨테이너의 경우 이전 p#과 같이 필요에 따라 설정할 수 있습니다. 헤더, p#left, p#content, p#right 등
장점:
구조가 간단하고 명확하며, 다양한 브라우저에서 호환성을 확보하기 위해 js나 해킹이 필요하지 않으며 iPhone에도 적합합니다.
단점:
단점은 p#footer 컨테이너의 높이를 고정해야 한다는 것입니다. 이 높이는 필요에 따라 설정할 수 있으며 단위는 px 또는 em일 수 있으며 p도 변경해야 합니다. #page 컨테이너. Padding-bottom(또는 border-bottom-width)은 p#footer의 높이와 같거나 약간 더 큰 크기로 설정되어 제대로 작동합니다.
방법 2:
바닥글의 음수 여백-상단 값을 사용하여 바닥글이 항상 페이지 하단에 고정되는 효과를 구현하는 방법을 자세히 살펴보겠습니다.
HTML 코드

코드는 다음과 같습니다.

<p id="header">header</p> 
<p id="page" class="clearfix"> 
<p id="left">left sidebar</p> 
<p id="content">main content</p> 
<p id="right">right sidebar</p> 
</p> 
</p> 
<p id="footer">footer</p>

CSS 코드

코드는 다음과 같습니다.

html,body{height:100%;margin:0;padding:0;} 
#container{min-height:100%;height:auto !important;height:100%;} 
#page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;边框宽度也可以*/} 
#header{padding:10px;background:lime;} 
#footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;} 
#left{width:18%;float:left;margin-right:2%;background:orange;} 
#content{width:60%;float:left;margin-right:2%;background:yellow;} 
#right{width:18%;float:right;background:green;} 
.clearfix:after{
visibility
:hidden;height:0;font-size:0;display:block;content:" ";clear:both;} 
* html .clearfix{zoom:1;}/* ie6 */ 
*
:first-child
+html .clearfix{zoom:1;} /* ie7 */

上面的代码是最基本的HTML Code，同时你也发现了p#footer和p#container是同辈关系，不像方法一，p#footer在p#container容器内部。当然你也可以根据你的需要把内容增加在p#container容器中，如：一个三列布局，而且还带有header部分。

方法一和方法二有几点是完全相同的，比如说方法一中的1-3三点，在方法二中都一样，换句话说，方法二中也需要把html,body高度设置为100%,并重置margin,padding为0；其二p#container也需要设置min-height:100%,并处理好IE6下的min-height兼容问题；其三也需要在p#page容器上设置一个padding-bottom或border-bottom-width值等于p#footer高度值（或略大于）。那么两种方法不同之处是：
p#footer放在p#container容器外面，也就是说两者是同级关系，如果你有新元素需要放置在与p#container容器同级，那你需要将此元素进行绝对定位，不然将会破坏p#container容器的min-height值；
p#footer进行margin-top的负值设置，并且此值等于p#footer的高度值，而且也要和p#page容器的padding-bottom(或border-bottom-width)值相等。
优点：
结构简单清晰，无需js和任何hack能实现各浏览器下的兼容。
缺点：
要给footer设置固定值，因此无法让footer部分自适应高度。

위 내용은 div 바닥글 태그의 CSS 구현은 페이지 하단에 고정되어 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!