本文介绍了html css布局,包含标题两列和页脚的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图创建一个高度为100px,宽度为100%的头部区域。
我需要2列,左边一个是250px宽,100%的高度,直到页脚。右列应为剩余页面宽度的100%,页脚高度为100%。页脚应位于页面的底部,高度为100px,宽度为100%。
即使2列中没有内容,我需要他们向下延伸到页脚,让页脚可见,而不滚动到它。

I am trying to create a head area that is 100px in height and spans 100% in width.I need 2 columns with the left one being 250px wide and 100% in height down to the footer. The right column should be 100% of the remaining page width and 100% in height to the footer. The footer should be at the bottom of the page and 100px in height and 100% in width.Even if there is no content in the 2 columns, I need them to stretch down to the footer and have the footer visible without scrolling down to it.

这是我到目前为止。

 c>  c>将 250px 。 
  • 所有水平空间留下 #left

  • #left 和 #right push #bot 关闭。

  • 如果有垂直剩余空间, c $ c> #left 和 #right 会增长,因此 #bot

    • #top and #bot are always 100px tall.
    • #left will be 250px wide if it can.
    • #right occupies all horizontal space left by #left
    • #left and #right push #bot down.
    • If there is vertical remaining space, #left and #right will grow so that #bot will be at the bottom of the window.

    html, body {
        height: 100%;
        width: 100%;
        margin: 0;
    }
    body {
        display: table;
    }
    #top, #bot {
        display: table-row;
    }
    #top {
        height: 100px;
    }
    #middle {
        display: table-cell;
        overflow: hidden;
    }
    #left, #right {
        margin-bottom: -100000px;
        padding-bottom: 100000px;
    }
    #left {
        width: 250px;
        float: left;
    }
    #right {
        overflow: hidden;
    }
    #bot {
        height: 100px;
    }
    

    它需要将您的html更改为

    It requires changing your html to

    <div id="top"></div>
    <div id="middle">
        <div id="left"></div>
        <div id="right"></div>
    </div>
    <div id="bot"></div>
    






    而不是 100000px ,使用大于 #left 和 #right 高度的值。


    Instead of 100000px, use a value greater than the height of #left and #right.

    由于它有点怪,你可能更喜欢没有浮动,但不工作在IE8,虽然它只使用CSS2.1功能。

    Since it's a bit hacky, you may prefer a css-tabular-only approach without floats, but doesn't work on IE8, although it only uses CSS2.1 features.

    这篇关于html css布局,包含标题两列和页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

    05-28 08:41
    查看更多