DIV+CSS布局中自适应高度的解决方法

最新推荐文章于 2024-06-25 22:50:37 发布
最新推荐文章于 2024-06-25 22:50:37 发布
阅读量1k 收藏 2
点赞数
分类专栏： Web 文章标签： div css xhtml 浏览器 html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Equal height(DIV+CSS布局中自适应高度的解决方法)</title>
<style type="text/css">
body{
 padding: 0;
 margin: 0;
 font-size: 12px;
 font-family: Arial, Helvetica, sans-serif;
 line-height: 140%;
 text-align: center;
 background:#E7DFD3;
}
#wrap{
 width: 750px;
 margin: 0 auto;
 overflow: hidden;
}

#sideleft{
 width: 150px;
 float: left;
 background: #FFF;
 text-align: left;
}
#sideright{
 width: 600px;
 float: left;
 background: #F0F0F0;
 text-align: left;
}
/* easy clearing */
#wrap:after
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
 }
#wrap
 {
 display: inline-block;
 }
/*/*/
#wrap
 {
 display: block;
 height:auto !important;
 min-height:289px;
 height:290px;
 }
/* end easy clearing */
/*/*/
#sideleft, #sideright
 {
 padding-bottom: 32767px !important;
 margin-bottom: -32767px !important;
 }
@media all and (min-width: 0px) {
#sideleft, #sideright
 {
 padding-bottom: 0 !important;
 margin-bottom: 0 !important;
 }
#sideleft:before, #sideright:before
 {
 content: '[DO NOT LEAVE IT IS NOT REAL]';
 display: block;
 background: inherit;
 padding-top: 32767px !important;
 margin-bottom: -32767px !important;
 height: 0;
 }
}
/**/
</style>
</head>
<body>
<div id="wrap">
  <div id="sideleft">
  <h2>sideleft</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的。 </p>
  </div>
  <div id="sideright">
  <h2>sideright</h2>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
    <p> 要从固定的、基于像素的设计方法转到弹性的、相对的设计方法并不容易。但是如果恰当利用，就可以成为增强亲和力和易用性的一个自然选择，同时又无须做出设计上的牺牲。 </p>
    <p> 像素是计算机屏幕上的不可缩放的点，而一个
      h3 就是一个字大小的方块。由于字体大小的变化， h3
      代表用户喜欢的文字大小的相对单位。 </p>
    <p> 采用印刷式的固定设计方案或许要容易些，因为如果尺寸不变，则考虑的东西就相对较少。可是如果采用弹性的设计方法，就可以充分利用电脑的显示器和浏览器。 </p>
    <p> 也许你想你的网站以某种特定的方式显示，但是你的用户想看到的可能不一样。任何强加于用户的东西都不利于易用性，从而对网站的成功造成损害。 </p>
  </div>
</div>
</body>
</html>

chenyg2000
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css实现div宽度自适应，宽高保持等比缩放
丑小鸭变黑天鹅的博客
03-29 1万+
css实现div宽度自适应，宽高保持等比缩放1、方式一2、方式二3、方式三4、方式四 1、方式一 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .square { width: 30%; height: 30vh; border: 1px so
CSS布局自适应高度解决方法
咸鱼白菜
06-29 833
原作者:Alex Robinson原文标题:Equal Height Columns这是一个比较典型的三行二列布局，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题。先看代码：#wrap{ overflo
CSS，如何让 div 的宽度自适应内部文字的宽度？
winfield821的博客
05-12 7566
要让 div 元素的宽度自适应内部文字的大小，你可以使用 CSS 属性。则可以禁止文本换行，保证元素宽度只受内部文本宽度影响。，可以使其宽度根据内部内容自适应调整。
css中的自适应
最新发布
qq_64149175的博客
06-25 1837
定义：网页布局中经常要定义元素的宽和高，但很多时候我们希望元素的大小能够根据窗口或子元素自动调整。
宽高自适应
m0_70877859的博客
07-15 205
自适应网页布局中经常要定义元素的宽和高。但很多时候我们希望元素的大小能够根据窗口或者子元素调整，这就是适应。
CSS实现div的全屏自适应显示(两种方案)
weixin_30662011的博客
03-01 1393
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-...
研究了一下div+css的高度自适应问题
10-30
在本文中，我们讨论了 div + CSS 高度自适应问题的解决方案和实现方法。我们使用了 CSS 中的百分比高度和绝对定位技术，结合 JavaScript 来实现 div 元素的高度自适应。这种方法可以应用于各种 Web 开发项目中，例如...
div+css实现自适应宽度按钮
10-30
答案：浮动布局是一种CSS布局方式，能够使元素浮动在父元素中，实现自适应宽度按钮的效果。 4. 如何使用a标签和span标签来组合出完整的圆角矩形按钮？ 答案：可以使用a标签作为按钮的容器，span标签作为按钮的文字...
div+css布局资料.zip
11-08
本资料包含多个实际项目案例，涵盖上述各种布局模式，通过解析这些案例，读者可以学习到如何在实际开发中应用Div+CSS布局，提升布局设计能力。 总结，Div+CSS布局是网页设计的基石，熟练掌握这一技术将极大提升设计...
DIV+CSS布局教程大全与pdf电子书 下载
10-30
### DIV+CSS布局教程知识点概览 #### 一、DOCTYPE的重要性与选择 - **什么是DOCTYPE：** DOCTYPE 是文档类型声明...希望读者通过学习本教程，能够掌握DIV+CSS布局的核心技术和最佳实践，从而在实际项目中灵活运用。
div+css：Tab自适应的示例代码
05-08
在网页设计中，`div` 和 `css` 是构建页面布局和样式的重要工具。`Tab` 自适应设计是现代网页中常见的一种交互模式，它允许用户通过点击不同的标签来切换不同的内容区域，同时还能根据屏幕尺寸自动调整布局，提供...
CSS 实现div宽度根据内容自适应
09-24
最近做了个项目，其中有项目需求是需要div根据内容进行宽度自适应。下面小编给大家分享一段代码关于CSS 实现div宽度根据内容自适应 的相关知识，需要的朋友参考下
CSS实现div高度自适应
jshyzx1999的博客
04-17 1445
1、有时候，我们希望容器有一个固定高度，但当其中的内容多的时候，又希望高度能够自适应，也即容器在纵向能被撑开，且如果有背景，也能够自适应。在一般情况下，使用min-height即可解决。但是广大网民的首选浏览器ie6并不支持min-height。ie7，opera，火狐，谷歌没有问题。所以采用以下写法可以解决兼容性： height:auto!important; height:200px; m...
纯CSS实现Div高度根据自适应宽度（百分百调整）
weixin_34006468的博客
04-12 3821
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;纯CSS实现Div高度根据自适应宽度（百分百调整）&lt;/title&gt; &lt;/head&gt; &lt;style&am
怎样让一个div高度自适应浏览器高度
weixin_30247781的博客
08-10 313
原文：http://www.jb51.net/web/79171.html 原文：http://zhidao.baidu.com/link?url=oId1sFRhiBnV37-RmRE6WQNHxiXvVBlS7wsxpOpKSsw6m6shfBGOArvYE4tTkWag_zeWaEkf7APkf0bZxMQUSlMvBKZNK5G4RIai1gKHc1S 这个老生长谈的问题，不知困扰了多...
div+css 自适应宽
痴人飞师
04-22 191
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt;me
HTML+CSS实现div的高度自适应填满剩余空间的7种方法
weixin_33739646的博客
01-23 9726
2019独角兽企业重金招聘Python工程师标准>>> ...
css 网页宽度高度自适应
WitsMakeMen的专栏
04-10 2114
高度自适应 html{ margin:0; border: 0; height:100%; overflow: hidden; } body{ margin: 0; border: 0; width:100%; height:100%; overflow: auto; background: yellow; } .zhu{ width:100%; height:300%; background:
CSS布局自适应高度终极方法
wangmj518的专栏
05-09 1090
我们排版的最终目的是让程序员能快速绑定，最终的真实数据能和效果图一样，但是我们经常在国字型页面里面碰到左右两列的高度不确定，这样我们必须要把两列的自己适应，请看解决方法 ，每列高度（事先并不能确定哪列的高度）的相同，是每个设计师追求的目标，按一般的做法，大多采用背景图填充、加JS脚本的方法使列的高度相同，本文要介绍的是采用容器溢出部分隐藏和列的负底边界和正的内补丁相结合的方法来解决列高度相同的问题...
理解Div+CSS布局：自适应宽度与核心概念解析
本文将深入探讨`Div+CSS`在网页设计中的应用，特别是关于一列自适应宽度的实现。自适应宽度布局是现代网页设计的关键特性，它允许页面内容根据浏览器窗口大小动态调整，提供良好的用户体验。在CSS中，通过使用百分比...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值