问题描述
我试图创建一个高度为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 。
- #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布局,包含标题两列和页脚的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!