zoukankan      html  css  js  c++  java
  • 一个DIV三列布局100%高度自适应的好例子(国外)

    <?xml version="1.0" encoding="UTF-8"?> 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > 
    <head> 
    <title>One Hundred Percent Height divs</title> 
    <style type="text/css" media="screen"> 
    body { 
    margin:0; 
    padding:0; 
    height:100%; /* this is the key! */ 

    #left { 
    position:absolute; 
    left:0; 
    top:0; 
    padding:0; 
    200px; 
    height:100%; /* works only if parent container is assigned a height value */ 
    color:#333; 
    background:#eaeaea; 
    border:1px solid #333; 

    .content { 
    margin-left:220px; 
    margin-right:220px; 
    margin-bottom:20px; 
    color:#333; 
    background:#ffc; 
    border:1px solid #333; 
    padding:0 10px; 

    #right { 
    position:absolute; 
    right:0; 
    top:0; 
    padding:0; 
    200px; 
    height:100%; /* works only if parent container is assigned a height value */ 
    color:#333; 
    background:#eaeaea; 
    border:1px solid #333; 


    #left p { 
    padding:0 10px; 

    #right p { 
    padding:0 10px; 

    p.top { 
    margin-top:20px; 

    </style> 
    </head> 

    <body> 
    <div id="left"> 
    <p class="top">This design uses a defined body height of 100% which allows setting the 
    contained left and right divs at 100% height.</p> 

    <p>This design uses a defined body height of 100% which allows setting the contained left and 
    right divs at 100% height.</p> 

    <p>This design uses a defined body height of 100% which allows setting the contained left and 
    right divs at 100% height.</p> 
    </div> 

    <div class="content"> 
    <p>This design uses a defined body height which of 100% allows setting the contained left and 
    right divs at 100% height.</p> 
    </div> 

    <div class="content"> 
    <p>This design uses a defined body height which of 100% allows setting the contained left and 
    right divs at 100% height.</p> 
    </div> 

    <div class="content"> 
    <p>This design uses a defined body height which of 100% allows setting the contained left and 
    right divs at 100% height.</p> 
    </div> 

    <div id="right"> 
    <p class="top">To solve an inheritance issue displayed in div #right as rendered in Opera, class p.top 
    using margin-top:20; is applied to the first paragraph of each outer divs.</p> 

    <p>This design uses a defined body height which of 100% allows setting the contained left and 
    right divs at 100% height.</p> 

    <p>This design uses a defined body height which of 100% allows setting the contained left and 
    right divs at 100% height.</p> 
    </div> 
    </body> 
    </html> 

    http://www.webmasterworld.com/forum83/200.htm

    来自:

  • 相关阅读:
    从键盘输入两个数字,根据订单或大或小的输出
    软考路(3)——数据流图的尖
    HDU 3988 Harry Potter and the Hide Story(数论-整数和素数)
    排序算法门外汉理解-Shell排序
    流量计算-Jstorm提交Topology过程(下一个)
    CentOS在安装配置 Ngnix_tomcat_PHP_Mysql
    C++基于该模型模板包括节目外实例
    同ListView该接口无法通过手势滑动左右切换界面问题解决方法
    用彩虹表破解MD5、LM Hash等复杂加密密码
    logstash
  • 原文地址:https://www.cnblogs.com/si-shaohua/p/4235649.html
Copyright © 2011-2022 走看看