twitter-bootstrap – Twitter Bootstrap 3 – 最大高度,自定义布局

CSS 前端之家
前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Twitter Bootstrap 3 – 最大高度,自定义布局，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我有这样的事情：

  1. +-------------------------------------------+
  2. |             -- navigation --              |
  3. +------+------------------------------------+
  4. |      |                                    |
  5. | left |                                    |
  6. | side |                                    |
  7. | with |                                    |
  8. | affix|           -- content (white) --    |
  9. | menu |                                    |
  10. |-black|                                    |
  11. |      |                                    |
  12. |      |                                    |
  13. |      +------------------------------------+
  14. |      |           -- footer (white) --     |
  15. +------+------------------------------------+

作为我在TB 3.0中的布局,以及一些代码：

我想让我的左侧(黑色背景)和内容(白色背景)高度=我的浏览器窗口和页脚(白色背景)100％在我的内容下方可见(也在滚动上).

现在,我得到了最后一个元素的高度.如果我的内容很短,则会在浏览器的垂直中心结束.

这是它：http://codepen.io/anon/pen/FxImy

最佳答案
纯CSS解决方案(使用calc)

如果你可以使用CSS3,并且这个50px高度是静态的,你可以使用calc来实现你的布局.

这是一个DEMO

HTML

CSS

  1. *
  2. {
  3.     padding: 0;
  4.     margin: 0;
  5. }
  6. html,body
  7. {
  8.     height: 100%;
  9. }
  11. header,footer
  12. {
  13.     height: 50px;
  15.     background-color: yellow;
  16.     text-align: center;
  17. }
  18. #Container,#Content
  19. {
  20.     height: calc(100% - 50px);
  21.     overflow: auto;
  22. }
  23. #Left,#Right
  24. {
  25.     height: 100%;
  26. }
  27. #Left
  28. {
  29.     float: left;
  30.     background-color: black;
  31.     color: white;
  32. }
  33. #Right
  34. {
  35.     overflow: auto;
  36. }

如果高度不是静态的,我会为你提供另一个解决方案,我演示了here它不是你的布局,但它可以用同样的方式完成.

猜你在找的CSS相关文章

IE浏览器兼容性调整总结技巧
前言 最近项目做完，用户需要兼容IE，于是开展了兼容性的调整工作。边调整边想感叹IE真是个...
css属性总结
前言 有些属性不是很常用，但是工作中遇到了，记录一下，方便学习。 1、text-indent text-...
政府网站公祭日，如何使网站整体变灰
前言 政府网站会遇到公祭日的时候，网站整体颜色变灰的情况。今天正好调了一下。在此把解决...
css实现图片动画效果
需求 项目里有个消息中心，当有消息的时候，小铃铛图标可以晃两下，提示当前有信息。 实现...
css实现文字渐变
html代码 css代码 效果图
移动端rem距离单位的使用
在做移动端开发的时候大家肯定会遇到适配问题，手机的屏幕大小有非常多的类别，使用传统的...
使用 media 实现响应式布局
最近工作有一个需求是将一个界面改为响应式布局，由于UI还没有给设计，于是自己先查了一下...
教你用原生CSS写炫酷页面切换效果，跟第三方组件说拜拜
因为项目需要，别人想让我给他写一个个人博客，并且给了我一个其他人的网页，可以点此查看...
CSS盒模型之内边距、边框、外边距 十九问 （持续更新）
本篇文章主要探讨盒模型，以及内边距、边框、外边距的面试题与思考，也希望您能把您的思考...
轻松上手CSS Grid网格布局
今天刚好要做一个好多div格子错落组成的布局，不是田字格，不是九宫格，12个格子这样子，看...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作