html 页码设计,html – 创建一个页脚结构,页脚底部和100％内容

我想为网页设计一个结构,但我有一个问题,我不能单独使用它.这就是我要的：

一个包含3个部分的网页：

1-header

2-content( has 2 parts, a sidebar and a content section)

3-footer

我想要这些特点：

1- if in the content section there is nothing then footer stays at the bottom, if we have content, footer pushes down and stays after my content

2- my sidebar(exist in the content section) take 100% height of content section and connects to footer

像这样：

我用这个代码构建它并且它可以工作,但我的问题是如果侧边栏区域的内容变大,侧边栏和主要内容区域重叠页脚！我希望在这种情况下,页脚会停留在我的内容之后.

我使用Twitter Bootstrap来完成我的工作.我不想使用仅在新浏览器中可用的方法.至少IE 9.

这是我的代码：

test

header

content

footer

这是CSS：

body,html{

height: 100%;

}

.container-fluid {

height:100%;

}

.header{

background-color: #ccff55;

}

.content{

background-color: #445566;

height: -webkit-calc(100% - 10%);

}

.sidebar{

background-color: #446655;

height: 100%;

}

.footer{

background-color: #11ff99;

}

html 页码设计,html – 创建一个页脚结构,页脚底部和100％内容相关推荐

使用抽象等设计工具创建一个稳固的核心机制
使用抽象等设计工具创建一个稳固的核心机制,由此核心机制来带动业务处理,这样就可以把变化的业务隔离在核心机制之外,从而使业务的变化不影响(独立于)核心机制,这就像我们最早设计系统时要自己基于TCP/IP ...
ITK:创建一个二进制球结构元素
ITK:创建一个二进制球结构元素内容提要 C++实现代码内容提要创建一个椭圆形结构元素 C++实现代码 #include "itkBinaryBallStructuringElemen ...
如何在Joomla中创建一个漂亮的单页网站
我们都知道一个好的网站对于建立企业信誉的重要性.但是,在拥有统一的单页网站和多页网站的选项之间进行选择可能会很棘手.特别是如果您是 Joomla 和 Web 开发的新手. 随着移动和社交媒体用户的增加 ...
创建一个栈存储结构，并且写入一些对栈的基本的操作
什么是栈:简单的说就是一个容器,一个瓶子,我们向瓶子里面放糖果,当想吃糖果的时候,将瓶子里的糖果再倒出来.我们要实现的就是怎样创建一个瓶子,并且怎样很容易的向里面添加糖果,向吃糖果的时候可以拿出来,自 ...
Java乐谱_如何在java中创建一个简单但结构良好的乐谱表(乐谱)？
我正在使用非常基本的声音合成在我的游戏中创建音频和效果.基本上,我有一些方法可以发出一个频率和频率的声音.幅度和幅度持续时间. 对于短语和旋律,我想提出一个基本的符号,这样我就可以轻松地重写或添加新的 ...
HTML5 canvas 游戏设计：创建一个经典的魔塔游戏
整个项目都已经开源,项目地址:https://github.com/m8705/MAGIC-TOWER-JS 注:这是我高中时候的作品,BUG 很多,已经不再更新了.下载项目到本地就能玩. 前言魔塔 ...
Java 编写程序创建一个游戏【5、6两章的内容】【第5章】
每次使用单边大脑的时间不要太久, 连续使用左边脑30 分钟如同使用左臂 30 分钟一样, 周期性性地交换让大脑两侧轮流休息. 左脑活动包括了循序渐进的工作,解决逻辑问题与分析: 右脑的活动包括了阴雨. ...
如何设计一个落地页，才算得上是一个好的落地页？
在营销过程中经常会遇到这种问题:做了很多广告投放,也做了很多优化的工作,投放页面每天的流量和点击消费都很高,可是获取的客户线索和购买率就是上不去. 很多企业花大量的市场费用做矩阵式推广投放,但是在落地 ...
[原创] OneThink模型管理详解-10分钟创建一个团队管理后台
本文为原创,根据自己在使用onethink创建web应用时的真实经历撰写而成.请支持本人版权,转载时注明出处.仅为经验分享,不代表权威,不完善不准确之处欢迎纠正,有任何问题可对本文留言. 1.1.1 ...

html 页码设计,html – 创建一个页脚结构,页脚底部和100％内容

html 页码设计,html – 创建一个页脚结构,页脚底部和100％内容相关推荐

最新文章

热门文章