Question

我正在开发一个CSS3 / HTML5 Asp.NET 4.5 Web应用程序。除了一个问题，我有我想要的布局HTML和CSS。

我的CSS背后的理论是标题和导航显然设置在页面的顶部，有一个带有旁边和文章的容器，后面是一个独立的页脚，我想要总是在页面的底部有多少内容。一切正常，但是当我将旁边设置为100％高度时，它是视口高度的100％，这意味着在内容很少的页面上，你必须滚动260px（页眉，导航和页脚的组合高度）看见了。因此，为了解决这个问题，我将旁边的边距设置为280px顶部，并将80px底部设置为可以解决问题。它没。因此，我开始按照SO和网络上的类似问题所提出的立场和清晰的方式进行游戏而没有成功。

HTML：

<body>
    <form id="form1" runat="server">
        <header>
            <div id="logo">
            </div>
            <div id="title">
                <h1>Nathan A. Chesebro</h1>
                <h2>United States Merchant Marine</h2>
            </div>
        </header>
        <nav>

        </nav>
        <div id="content">
            <aside>
                Vessel data
            </aside>
            <article>
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
            </article>
        </div>
        <footer>

        </footer>
    </form>
</body>

CSS

* 
{
    margin: 0;
}
body 
{
    margin: 0px auto;
    height: 100%;
}

form, html
{
    height: 100%;
}

header
{
    margin: 0px auto; 
    background-color: #1041a2;
    background-image: url(../Images/headerHCJ.png);
    background-repeat: no-repeat;
    background-position-x: right;
    height: 150px;
    position: relative;
}

nav
{
    background-image: url(../Images/nav.png);
    font-family: Arial;
    color: white;
    background-repeat: repeat-x;
    height: 30px;
    width: 100%;
    line-height: 30px;
    margin: 0px auto;

}

#content 
{
    margin: 0px auto;
    height: 100%;
}

aside 
{
    margin: 180px 0px 80px 0px auto;
    float: left;
    width: 250px;
    background-color: gray;
    height: 100%;
    overflow: hidden;
    position: relative;
    clear: both;
}

article
{
    margin: 0px auto;
    padding-left: 250px;
    min-height: 100%;
}

footer {
    height:80px;
    background: black;
    clear: both;
}

Answer 1

这是你要找的吗？这只是一个概念，所以我没有复制你的确切代码。此外，我在CSS中使用了calc（）方法（它获得了越来越多的浏览器支持，但可能仍然限制某些例如.opera-mini等。）。

这是小提琴：http://jsfiddle.net/thePav/A3NCW/1/

CSS

html,
body {height: 100%; margin: 0; padding: 0}

header {height: 150px; background-color: #800}
  header #logo {}
  header #title {}

nav {height: 30px; background-color: #080}

#content {overflow: hidden; height: calc(100% - 280px)}
  #content aside {background-color: #555; height: 100%; float: left; width: 25%}
  #content article {float: left; width: 75%}

#footer {width: 100%; height: 100px; position: absolute; bottom: 0; left: 0; background-color: #000}

HTML

<header>
  <div id="logo"></div>
  <div id="title"></div>
</header>

<nav></nav>

<div id="content">
  <aside></aside>
  <article>Some content here</article>
</div>

<div id="footer"></div>

Answer 2

您可以使用display的'table'和'table-cell'值。

看看这个小提琴：http://jsfiddle.net/scottmey/j9jrz/

#content {
    display: table;
    width: 100%;
}
aside {
    display: table-cell;
}
article {
    display: table-cell;
}

Answer 3

CSS不能用于使两个项目具有相同的高度。

您需要使用javascript来设置高度，否则请使用表格标记。

CSS高度 - 2个div之间的100％

3 个答案: