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

    来自:

  • 相关阅读:
    微信小程序 开发 微信开发者工具 快捷键
    .NET 4.0 任务(Task)
    MVC UpdateModel的未能更新XXXXX的类型模型
    ORACLE 定时执行存储过程
    DotNet 资源大全中文版(Awesome最新版)
    基于SignalR实现B/S系统对windows服务运行状态的监测
    Method not found: '!!0[] System.Array.Empty()'.
    MVC-RedirectToAction跳转到其他Area
    C# where用法
    C#委托的介绍(delegate、Action、Func、predicate)
  • 原文地址:https://www.cnblogs.com/si-shaohua/p/4235649.html
Copyright © 2011-2022 走看看