w3ctech

网页内容太少,小于屏幕高度的时候该怎么处理?

我就说我是废材了,希望大大们不要嫌弃,

如题目,在做页面的时候经常遇到网页content的内容少

内容区域小于屏幕的高度

<div class="header"></div>
<div class="container"></div>
<div class="footer"></div>

这个时候能不能直接用css直接实现,在网页内容小于屏幕的时候 .container 的高度等于屏幕高度减去.header和.footer的高度

如果我用less能实现么,怎么实现?

前端圈微信

扫码关注前端圈微信公众号

共收到7条回复

  • http://www.w3ctech.com/event/31 这个页面第二个分享应该有你想要的解决方案。

    回复此楼
  • 谢谢,我去学习一下

    回复此楼
  • 你是想如果页面太短不要把 footer 给扯上来,用这个, sticky footer 的写法,没有 js, 点第一个链接就够了,呵呵,

    回复此楼
  • 对对对 @shrekuu 我就是要这个效果

    多谢 多谢

    回复此楼
  • 如果要求左侧导航和右侧内容一样高,这样的话是不是要js才能实现

    回复此楼
  • 给他一个最小高度即可,min-height:300px;

    回复此楼
  • 当然不用

    <div id="header">
        toubu
    </div>   
    <div id="container">
        <div id="left">
    去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去22去23132去23132去23132去23132去23132去23132去23132去23132去23132去去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132去23132
        </div>
        <div id="right">
        adasdasdasdasd
        </div>
    </div>
    <div id="footer">
        weibu
    </div>
    
    #header,#footer{
        width:980px;
        margin:0 auto;
    }
    #container{
        width:980px;
        margin:0 auto;
        overflow:hidden;    //一举两得:隐藏背景,清除浮动
    }
    #left{
        float:right;
        width:280px;
        background:#ccc;
    }
    #right{
        float:right;
        width:650px;
        background:#900;
    }
    #left,#right{
        padding:0 5px;
        padding-bottom:9999px;//将背景拉伸到很长
        margin-bottom:-9999px;//可以去掉padding-bottom,再试着调整这个值,来看看效果,一定要在padding-bottom之
    后声明    
    }
    
    回复此楼