如何在此布局中使内容 100% 高度和等高列? [英] How to Make the Content 100% height and equal height columns in this layout?
问题描述
我有这样的布局,其中 my_menu 固定在顶部,然后是标题,然后是 960 像素的内容并居中,其中 3 列向左浮动,最后是粘性页脚.
问题是如何让内容拉伸到100%的高度即使任何一个子列中的内容不足?
无论任何列的高度如何,如何使 3 列的高度相等内容?
- 维护粘性页脚!纯 CSS,无 JavaScript,无jQuery!
HTML 标记
<html lang="zh-cn"><头><meta charset="utf-8"/><title>文档标题</title><link rel="stylesheet" href="main.css" type="text/css"/>头部><body id="索引"><div id="包装器"><div id="my_menu">固定菜单宽度 100%
<div id="my_header">标题宽度 100%
<div id="内容"><p>内容 960px</p><div id="col1" class="content_columns">第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%第 1 列宽度 320px 高度 100%
<div id="col2" class="content_columns">列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%列 2 宽度 320px 高度 100%