首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 编程语言 > 正文

100%最小高度CSS布局

作者：手机用户2402851335 | 2023-09-06 10:11
如何解决《100%最小高度CSS布局》经验，为你挑选了6个好方法。

在各种浏览器中制作100%最小高度元素的最佳方法是什么？特别是如果你有一个页眉和页脚固定高度的布局,你如何使中间内容部分填充100%的空间,页脚固定在底部？



1> ollifant..：

我使用以下一个:CSS布局 - 100%高度

最小高度

此页面的#container元素的最小高度为100%.这样,如果内容需要的高度超过视口提供的高度,则#content的高度也会使#container变长.然后可以使用#container上的背景图像显示#content中可能的列; div不是表格单元格,您不需要(或想要)物理元素来创建这样的视觉效果.如果你还不相信; 想想摇摆不定的线条和渐变而不是直线和简单的配色方案.

相对定位

因为#container具有相对位置,所以#footer将始终保持在其底部; 因为上面提到的最小高度不会阻止#container缩放,所以即使(或者更确切地说是)#content强制#container变长,这也会起作用.

填充底

由于它不再处于正常流程中,#content的填充底部现在为绝对#footer提供了空间.默认情况下,此填充包含在滚动高度中,因此页脚将永远不会与上述内容重叠.

稍微缩放文本大小或调整浏览器窗口大小以测试此布局. 

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
    background:gray;

    font-family:arial,sans-serif;
    font-size:small;
    color:#666;
}

h1 { 
    font:1.5em georgia,serif; 
    margin:0.5em 0;
}

h2 {
    font:1.25em georgia,serif; 
    margin:0 0 0.5em;
}
    h1, h2, a {
        color:orange;
    }

p { 
    line-height:1.5; 
    margin:0 0 1em;
}

div#container {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */
    width:750px;
    background:#f0f0f0;

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

div#header {
    padding:1em;
    background:#ddd url("../csslayout.gif") 98% 10px no-repeat;
    border-bottom:6px double gray;
}
    div#header p {
        font-style:italic;
        font-size:1.1em;
        margin:0;
    }

div#content {
    padding:1em 1em 5em; /* bottom padding for footer */
}
    div#content p {
        text-align:justify;
        padding:0 1em;
    }

div#footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
    background:#ddd;
    border-top:6px double gray;
}
div#footer p {
    padding:1em;
    margin:0;
}

对我来说很好.



2> 小智..：

要将自定义高度设置为锁定到某个位置: 

body, html {
  height: 100%;
}
#outerbox {
  width: 100%;
  position: absolute; /* to place it somewhere on the screen */
  top: 130px;         /* free space at top */
  bottom: 0;          /* makes it lock to the bottom */
}
#innerbox {
  width: 100%;
  position: absolute;				
  min-height: 100% !important; /* browser fill */
  height: auto;                /*content fill */
}


3> Stanislav..：

这是另一种基于vh或者viewpoint height,详细信息访问CSS单元的解决方案.它基于此解决方案,它使用flex代替.

* {
    /* personal preference */
    margin: 0;
    padding: 0;
}
html {
    /* make sure we use up the whole viewport */
    width: 100%;
    min-height: 100vh;
    /* for debugging, a red background lets us see any seams */
    background-color: red;
}
body {
    /* make sure we use the full width but allow for more height */
    width: 100%;
    min-height: 100vh; /* this helps with the sticky footer */
}
main {
    /* for debugging, a blue background lets us see the content */
    background-color: skyblue;
	min-height: calc(100vh - 2.5em); /* this leaves space for the sticky footer */
}
footer {
    /* for debugging, a gray background lets us see the footer */
    background-color: gray;
	min-height:2.5em;
}

    
This is the content. Resize the viewport vertically to see how the footer behaves.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.

    
This is the content.





    
This is the footer. Resize the viewport horizontally to see how the height behaves when text wraps.

    
This is the footer.


4> henrikpp..：

kleolb02的答案看起来很不错.另一种方式是粘性页脚和最小高度黑客的组合



5> levik..：

一个纯粹的CSS解决方案(#content { min-height: 100%; })将在很多情况下工作,但不是在所有情况下 - 尤其是IE6和IE7.

不幸的是,您需要使用JavaScript解决方案才能获得所需的行为.这可以通过计算内容的所需高度

并将其设置为函数中的CSS属性来完成:

function resizeContent() {
  var contentDiv = document.getElementById('content');
  var headerDiv = document.getElementById('header');
  // This may need to be done differently on IE than FF, but you get the idea.
  var viewPortHeight = window.innerHeight - headerDiv.clientHeight;
  contentDiv.style.height = 
    Math.max(viewportHeight, contentDiv.clientHeight) + 'px';
}

然后,您可以设置此功能为处理程序onLoad和onResize事件:


  . . .



6> vsync..：

为了min-height正确使用百分比,在继承它的父节点时min-height,诀窍是将父节点高度设置为1px,然后子节点min-height将正常工作.

演示页面

推荐阅读
devbox
手机用户2402851335
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有