Question

我正在使用HTML5 / CSS3，我想要做的是创建一个页面，如果需要滚动，或者如果数据较少则全部在屏幕的一个部分。目前我没有使用包装，因为谷歌搜索我被告知你可以使用身体 - ＆gt;工作良好。正如您在我的CSS中看到的，我已将html,body设置为100%，然后查看它滚动的代码。

我怎样才能使这个屏幕大小相关？

html,body{
    margin:0 auto;
    width:960px;
    height:100%;
}
header{
    width:100%;
    border-bottom:1px solid red;
}
header #logo{   
}
header nav{
    float:left;
    border:1px solid red;
    width:100%;
    margin:0 0 5px 0;
}
header nav ul li{
    float:right;
    height:40px;
    margin:0 0 0 15px;
    list-style-type: none;
}
header ul li a{
    color:#000;
    font-size:14px;
    text-decoration: none;
}

#content{
    float:left;
    width:700px;
    min-height:100%;
    border:1px solid red;
}

#sidebar{
    float:right;
    width:250px;
    min-height:100%;
    border:1px solid green;
}

footer{
    clear: both;
    width:100%;
    height:40px;
}

2011年模板布局＆LT; /脚本＆GT;

    <div id="logo">
        <h1>Template Logo 2011</h1>
    </div><!--logo end -->
        <nav>
            <ul>
                <li><a href="#">Page One</a></li>
                <li><a href="#">Page Two</a></li>
                <li><a href="#">Page Three</a></li>
                <li><a href="#">Page Four</a></li>
                <li><a href="#">Page Five</a></li>
                </ul>
            </nav>
    </header>
    <section id="content">
        <h1>Content Introduction</h1>
        <p>Content</p>
    </section>
    <aside id="sidebar">
        <article id="box_one">
            <h2>Box One</h2>
            <p>Box Content</p>
        </article>

        <article id="box_two">
            <h2>Box Two</h2>
            <p>Box Content</p>
        </article>

        <article id="box_three">
            <h2>Box One</h2>
            <p>Box Content</p>
        </article>  
        </aside>
    <footer>
        <p>Footer content</p>
    </footer>

Answer 1

这是针对CSS3的。主键是display：table;显示：table-cells;一起使用可以为您提供匹配的高度，而不需要div或asides等作为实际的表格单元格。

            <!Doctype HTML>
            <html>
            <Head>
            <style type="text/css">
            html,body{
                margin:0 auto;
                width:960px;
            }
            header{
                width:100%;
                border-bottom:1px solid red;
            }
            header #logo{   
            }
            header nav{
                float:left;
                border:1px solid red;
                width:100%;
                margin:0 0 5px 0;
            }
            header nav ul li{
                float:right;
                height:40px;
                margin:0 0 0 15px;
                list-style-type: none;
            }
            header ul li a{
                color:#000;
                font-size:14px;
                text-decoration: none;
            }

            #wrapper{
                display: table;
                width: 960px;
                border: 1px solid blue;
            }

            #content{
                display: table-cell;
                width:700px;
                border:1px solid red;
                min-height: 250px;
            }

            #sidebar{
                display: table-cell;
                width:250px;
                border:1px solid green;
            }

            footer{
                clear: both;
                width:100%;
                height:40px;
            }

            </style>
            </head>
            <body>

                <div id="logo">
                    <h1>Template Logo 2011</h1>
                </div><!--logo end -->
                    <nav>
                        <ul>
                            <li><a href="#">Page One</a></li>
                            <li><a href="#">Page Two</a></li>
                            <li><a href="#">Page Three</a></li>
                            <li><a href="#">Page Four</a></li>
                            <li><a href="#">Page Five</a></li>
                            </ul>
                        </nav>
                <div id="wrapper">    
                <div id="content">
                    <h1>Content Introduction</h1>
                    <p>Content</p>
                </div>
                <div id="sidebar">
                    <article id="box_one">
                        <h2>Box One</h2>
                        <p>Box Content</p>
                    </article>

                    <article id="box_two">
                        <h2>Box Two</h2>
                        <p>Box Content</p>
                    </article>

                    <article id="box_three">
                        <h2>Box One</h2>
                        <p>Box Content</p>
                    </article>  
                 </div>
                </div>
                <footer>
                    <p>Footer content</p>
                </footer>    

            </body>
            </html>

高度取决于屏幕尺寸

1 个答案: