Css 高度取决于屏幕大小

我正在使用HTML5/CSS3，我正在尝试创建一个页面，如果需要可以滚动，或者如果数据较少，则全部显示在屏幕的一个部分上。目前，我还没有使用包装由于谷歌我被告知，你可以使用身体->工程罚款。正如您在我的CSS中看到的，我已经将我的

html、body

设置为

100%

，然后在查看它滚动的代码时

    <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>       

我如何使这个屏幕大小取决于

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;
}

    <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>       

模板布局2011

    <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>       

模板标志2011







内容介绍
内容

    <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>       

方框一
盒子内容

    <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>       

方框二
盒子内容

    <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>       

方框一
盒子内容

    <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>       

页脚内容

    <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>       

---

这是为CSS3准备的。主键是显示：表格；显示：表格单元格；一起使用可以提供匹配的高度，而不需要div或asides等作为实际的表格单元格

    <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>       

            <!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>   

html，正文{
保证金：0自动；
宽度：960px；
}
标题{
宽度：100%；
边框底部：1px纯红；
}
标题#徽标{
}
标题导航{
浮动：左；
边框：1px纯红；
宽度：100%；
保证金：0.5px 0；
}
标题nav ul li{
浮动：对；
高度：40px；
利润率：0.15px；
列表样式类型：无；
}
标题ulli a{
颜色：#000；
字体大小：14px；
文字装饰：无；
}
#包装纸{
显示：表格；
宽度：960px；
边框：1px纯蓝色；
}
#内容{
显示：表格单元格；
宽度：700px；
边框：1px纯红；
最小高度：250px；
}
#边栏{
显示：表格单元格；
宽度：250px；
边框：1px纯绿色；
}
页脚{
明确：两者皆有；
宽度：100%；
高度：40px；
}
模板标志2011







内容介绍
内容

    <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>       

方框一
盒子内容

    <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>       

方框二
盒子内容

    <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>       

方框一
盒子内容

    <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>       

页脚内容

    <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>       

我不太清楚你想在这里实现什么。通常html没有样式，body tag没有高度值。你为什么要将高度设置为100%，准确地说？@Marlin，我想做的是创建一个没有滚动内容和侧边栏的网站，页脚坐得很好，但是如果由于数据量太大而需要滚动，我知道你需要一个粘性的页脚，因为没有足够的内容来保证滚动和100%的高度->需要时应该停止滚动，让页脚控制键是包装器显示：table；然后设置表格单元格；这是从CSS3开始的，不确定是否向后兼容。这里有一个参考链接