html css布局，包含标题两列和页脚 [英] html css layout with header two columns and footer

问题描述

我试图创建一个高度为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.

这是我到目前为止。

<div id="top"><p>Lorem ipsum dolor sit amet</p></div>
<div id="left"><p>Lorem ipsum dolor sit amet</p></div>
<div id="right"><p>Lorem ipsum dolor sit amet</p></div>
<div id="bot"><p>Lorem ipsum dolor sit amet</p></div>

body, html {
    height: 100%;
}
body {
    margin: 0px;
}
p {
    margin: 0px;
}
#top {
    height: 100px;
    background-color: #F4F4F4;
}
#left {
    width: 250px;
    height: 100%;
    background-color: #878787;
    float: left;
    margin-bottom: -100px;
}
#right {
    background-color: #323232;
    height: 100%;
    margin-bottom: -100px;
}
#bot {
    clear: right;
    height: 100px;
    background-color: #DCDCDC;
    margin-top: -100px;
    z-index: 100;
    position: relative;
}

推荐答案

使用css表。它的工作原理如下：

Ok, here is an alternative using css tables. It works like this:

• #top 和 bot 总是 100px 高。


• #left 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.

由于它有点怪，你可能更喜欢 css-tabular-只有方法没有浮动，但不工作在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布局，包含标题两列和页脚的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！