Question

如何使用yui创建液体标题（100％）并修复内容（950px）和页脚？

这样的事情：

---------------------------------- 
|         header (liquid)        |
---------------------------------- 
       |  left   | right |
       -------------------
       |      footer     |
       -------------------

非常感谢任何输入。

Answer 1

在这里，我为你附上了一个非常基本的结构。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Stackoverflow</title>
<style type="text/css">
body{
    margin:0;
    }
#container{
    width:100%;
    }
#header{
    width:100%;
    background:olive;
    }
#content{
    width:950px;
    margin:0 auto;
    overflow:hidden;
    }
#left{
    width:500px;
    float:left;
    background:blueviolet;
    }
#right{
    width:430px;
    float:right;
    background:green;
    }
#footer{
    width:100%;
    overflow:hidden;
    background:red;
    }
</style>
</head>

<body>
<div id="container">
    <div id="header">I'm the header with a width of 100%</div>    

    <div id="content">
        <div id="left">
            <h1>I'm the left floated content</h1>
            <p>lorem ipsum</p>
        </div>

        <div id="right">
            <h2>I'm the right floated content</h2>
            <p>lorem ipsum</p>
        </div>

        <div id="footer">
            <h3>I'm the footer</h3>
        </div>
    </div>
</div>
</body>
</html>

我希望这有帮助！

Answer 2

使用CSS网格执行此操作的最佳方法是在＃doc2 div之外创建一个div，您可以将其用作标题div。只需从＃doc2 div中删除div #hd，你根本就没有那个标题。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
   <title>YUI Base Page</title>
   <link rel="stylesheet" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css" type="text/css">
</head>
<body>
<div id="doc3" class="yui-t7"><div id="hd" role="banner">Header</div></div>
<div id="doc2" class="yui-t7">
   <div id="bd" role="main">
    <div class="yui-g">
    <!-- YOUR DATA GOES HERE -->
    </div>

    </div>
   <div id="ft" role="contentinfo"><p>Footer</p></div>
</div>
</body>
</html>

yui - 液体标题，修复内容

2 个答案: