网页制作

CSS设计网页小技巧 100%的高度
网页制作 2024/11/15 佚名
3 2

在前端人员之间有一个普遍存在的问题，如何让一个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,100%,高度
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
岱庙资源网 Copyright www.zgmyg.com

评论“CSS设计网页小技巧 100%的高度”

暂无“CSS设计网页小技巧 100%的高度”评论...
www.zgmyg.com 岱庙资源网
129,905影音资源
244,626技术资源
111,817软件资源
578,645站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
岱庙资源网 Copyright www.zgmyg.com