HTML Layout

最新推荐文章于 2023-04-26 10:49:15 发布

Welch_Lam

最新推荐文章于 2023-04-26 10:49:15 发布

阅读量598

点赞数 1

分类专栏： HTML 文章标签：网页布局

本文链接：https://blog.csdn.net/welchlam/article/details/90648241

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                height:100%;
                width: 100%;
            }

            #header {
                position:absolute; 
                top:0px; 
                left:0px; 
                right:0px;
                overflow:hidden;
                width: 100%;
                height: 30px;
                background-color:black;
                color:white;
                text-align:center;
            }
            #main {
                position:absolute; 
                top: 30px;
                left:0px; 
                right:0px; 
                overflow:auto;
                width: 100%;
                height: 100%;
            }
            #footer {
                position:absolute;
                bottom:0px; 
                left:0px; 
                right:0px; 
                overflow:hidden;
                height:30px;
                background-color:black;
                color:white;
                text-align:center;
            }

            #nav {
                position:absolute;
                width: 200px;
                background-color:#eeeeee;
                height: 100%;
                text-align:center;
                line-height:30px;
            }
            #section {
                left: 250px;
                position:absolute;
            }
        </style>
    </head>
    <body>
        <div id="header">Header</div>
        <div id="main">
            <div id="nav">
                AAAAAAAA<br>
                BBBBBBBB<br>
                CCCCCCCC<br>
                <button >Click Me</button>
            </div>
            <div id="section">
                <p>
                    111111111111111111111111111111111111111111111111111111111111111111111
                </p>
                <p>
                    222222222222222222222222222222222222222222222222222222222222222222222
                </p>
            </div>
        </div>
        <div id="footer">Footer</div>
    </body>
</html>