DIV+CSS布局中自适应高度的解决方法-css教程-PHP中文网

首页

web前端

css教程

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

PHPz

Mar 08, 2017 am 09:38 AM

代码

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

丢失的CSS技巧cohost.orgApr 25, 2025 am 09:51 AM

在这篇文章中，布莱克·莫里（Blackle Mori）向您展示了一些骇客，同时试图推动同位HTML支持的极限。如果您敢于使用这些，以免您也被标记为CSS罪犯。

光标的下一个CSS样式Apr 23, 2025 am 11:04 AM

具有CSS的自定义光标很棒，但是我们可以将JavaScript提升到一个新的水平。使用JavaScript，我们可以在光标状态之间过渡，将动态文本放置在光标中，应用复杂的动画并应用过滤器。

世界碰撞：使用样式查询的钥匙帧碰撞检测Apr 23, 2025 am 10:42 AM

互动CSS动画和元素相互启动的元素在2025年似乎更合理。虽然不需要在CSS中实施乒乓球，但CSS的灵活性和力量的增加，可以怀疑Lee＆Aver Lee＆Aver Lee有一天将是一场

使用CSS背景过滤器进行UI效果Apr 23, 2025 am 10:20 AM

有关利用CSS背景滤波器属性来样式用户界面的提示和技巧。您将学习如何在多个元素之间进行背景过滤器，并将它们与其他CSS图形效果集成在一起以创建精心设计的设计。

微笑吗？Apr 23, 2025 am 09:57 AM

好吧，事实证明，SVG的内置动画功能从未按计划进行弃用。当然，CSS和JavaScript具有承载负载的能力，但是很高兴知道Smil并没有像以前那样死在水中

'漂亮”在情人眼中Apr 23, 2025 am 09:40 AM

是的，让＃039;跳上文字包装：Safari Technology Preview In Pretty Landing！但是请注意，它与在铬浏览器中的工作方式不同。

CSS-tricks编年史XLIIIApr 23, 2025 am 09:35 AM

此CSS-tricks更新了，重点介绍了年鉴，最近的播客出现，新的CSS计数器指南以及增加了几位新作者，这些新作者贡献了有价值的内容。

tailwind的@Apply功能比听起来更好Apr 23, 2025 am 09:23 AM

在大多数情况下，人们展示了@Apply的@Apply功能，其中包括Tailwind的单个property实用程序之一（会改变单个CSS声明）。当以这种方式展示时，@Apply听起来似乎很有希望。如此明显

See all articles

热AI工具

热工具

MinGW - 适用于 Windows 的极简 GNU

这个项目正在迁移到osdn.net/projects/mingw的过程中，你可以继续在那里关注我们。MinGW：GNU编译器集合（GCC）的本地Windows移植版本，可自由分发的导入库和用于构建本地Windows应用程序的头文件；包括对MSVC运行时的扩展，以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

mPDF是一个PHP库，可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件，并处理不同的语言。与原始脚本如HTML2FPDF相比，它的速度较慢，并且在使用Unicode字体时生成的文件较大，但支持CSS样式等，并进行了大量增强。支持几乎所有语言，包括RTL（阿拉伯语和希伯来语）和CJK（中日韩）。支持嵌套的块级元素（如P、DIV），

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

显示更多

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

热AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

热门文章

热工具

EditPlus 中文破解版

SublimeText3汉化版

MinGW - 适用于 Windows 的极简 GNU

mPDF

DVWA

热门话题