CSS设计网页小技巧 100%的高度

前端  /  管理员 发布于 7年前   253

在前端人员之间有一个普遍存在的问题，如何让一个div的高度自动延伸到浏览窗口100%的高度。有一些不同的方法可以实现，但是，我想出了一个我个人比较喜欢的方法。今天，我将于你分享一下。

我对你是不了解的，但我试图弄明白如何让我的布局垂直拉伸到页面的100％高度，这样一个令我沮丧的问题。我想让div结构自动延伸，但是它就是不能自动延伸，现在，为什么他不能这样那？今天我将与你一起分享这个解决方法。
比方说你有如下html代码文档




提示：您可以先修改部分代码再运行

同时你有如下css样式文件

CSS Code复制内容到剪贴板
  1. body {   
  2.     margin: 0;   
  3.     padding: 0;   
  4. }   
  5. #content {   
  6.     background: #EEE;   
  7.     border-left: 1px solid #000;   
  8.     border-right: 1px solid #000;   
  9.     padding: 0 20px 0 20px;   
  10.     margin: auto;   
  11.     font: 1.5em arial, verdana, sans-serif;   
  12.     width: 960px;   
  13.     height: 100%;   
  14. }  

这就给了你这个示例文件。正如你所看到的，页面的content容器不能自动延伸到页面的整个高度。尽管我们给css样式文件添加了”height:100%”。为什么那？

让我给你另外一种方式来思考HTML，几乎每一个HTML文件都有一组容器彼此包含的。因此，在我们的页面里面，首先我们有一个<html>容器，其次<body>容器包含在<html>里，最后才是<div id=”content”></div>容器包含在里面。当我们往任何一个容器里面放置内容的时候，这个容器和包含此容器的父容器盒子都会自动延伸的，从而能容下这些新添加的内容。也就是说，当我们往<div id=”content”></div>容器盒子添加文字内容的时候，这个div容器盒子是自动延伸的，包含这个div容器的父容器盒子（body与html）依次是自动延伸的。

当我们给<div id=”content”></div>容器定义“height:100%”样式时，我们现在做的就是告诉它让其高度延伸到包含它的父容器的整个高度。在这个例子里，这个div容器被包含在<body>容器里面，所以<div id=”content”></div>就是body的整个高度。好了，body容器是如何延伸增长的那？它就像<div id=”content”></div>的高度一样，因为我们从来没有告诉它如何增高的。所以当我们给<div id=”content”></div>定义“height：100%”样式的时候，我们仅仅告诉了它自己。

解决此问题，我需要告诉<body>容器变的大一些儿，同时<html>容器也会出现同样的问题，它应该与<body>一样大。所以为了解决这个问题（让<div id=”content”></div>容器自动延伸到整个页面的高度）我们需要告诉<html>和<body>容器高度应为整个页面的高度。
如果我们修改我们的css文件，如下所示

CSS Code复制内容到剪贴板
  1. html {   
  2.     min-height: 100%;   
  3.     _height:100%;   
  4. }   
  5. body {   
  6.     margin: 0;   
  7.     padding: 0;   
  8.     min-height: 100%;   
  9.     _height:100%;   
  10. }   
  11. #content {   
  12.     background: #EEE;   
  13.     border-left: 1px solid #000;   
  14.     border-right: 1px solid #000;   
  15.     padding: 0 20px 0 20px;   
  16.     margin: auto;   
  17.     font: 1.5em arial, verdana, sans-serif;   
  18.     width: 960px;   
  19.     min-height: 100%;   
  20.     _height:100%;   
  21. }  

就是这样，这里是我们现在的最终效果。这个content容器现在已经能自动延伸到整个页面的高度了。

中文原文：小技巧：css100%高度
英文原文：Quick Tip：CSS 100% Height


  • 上一条：
    编写易于管理的css的技巧
    下一条：
    使用CSS sprite 的好处和坏处分析

    • 昵称：

    邮箱：

    0条评论 (评论内容有缓存机制,请悉知!)
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客