Question

我一直在尝试使用粘性页脚进行长时间的桌面布局。我的要求是页脚应该固定在底部，同时我将放大或缩小。但是当我缩放网页时，页脚将转到内容部分或其他方式，它将固定在底部，但我看不到页脚的左侧。

Answer 1

尝试http://somacss.com/layouts/stickyfooter_table.html

中的编码

我已粘贴下面的相同代码

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Layout: sticky footer table layout </title>

    <style type="text/css">
        html,body{height:100%;margin:0;}
        #container{
            table-layout:fixed;border-collapse:collapse;
            height:100%;width:100%;background:#FCD116;
        }
        #container td{padding:0;}
        /* ie 6/7 needs some top/bottom padding on footer for margin of children to show */
        #container #content, #footer{padding:1em;}

        #content{vertical-align:top;}
        #footwrap{vertical-align:bottom;}
        #footer{
            background:#555;overflow:hidden;
        }
        #content h1{text-align:center;}
    </style>
    <!--[if IE 7]>
    <style type="text/css">
        #footer{overflow:visible;}
    </style>
    <![endif]-->
</head>
<body>
    <table id="container">
        <tr><td id="content">
            <h1>sticky footer table layout</h1>
            <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p>
            <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p>
            <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p>
            <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p>
            <p>Puppies are better then kittens because they are more loyal and dumber and don't wake you up in middle of the night. But kittens are better because they are cuter and go outside to pee.</p>
        </td></tr>

        <tr><td id="footwrap">
            <div id="footer">
                <p>This is a tables sticky footer. <br>We don't have to set its height.</p>
            </div>
        </td></tr>
    </table>
</body>
</html>

如何使用表格布局在底部修复页脚？

1 个答案: