Html CSS高度-两个div之间为100%_Html_Css

Html CSS高度-两个div之间为100%

html css

Html CSS高度-两个div之间为100%,html,css,Html,Css,我正在开发一个CSS3/HTML5 Asp.NET 4.5 web应用程序。我有HTML和CSS的方式，我希望它为我的布局除了一个问题我的css背后的理论是页眉和导航显然设置在页面的顶部，有一个容器，其中有一个侧边和文章，后面有一个独立的页脚，我希望无论内容有多少，页脚总是位于页面的底部。一切都正常，但当我将边距设置为100%高度时，它是视口高度的100%，这意味着在内容很少的页面上，您必须滚动260px（页眉、导航和页脚的组合高度）才能看到它。所以，为了解决这个问题，我把顶部的边距设为280

我正在开发一个CSS3/HTML5 Asp.NET 4.5 web应用程序。我有HTML和CSS的方式，我希望它为我的布局除了一个问题

我的css背后的理论是页眉和导航显然设置在页面的顶部，有一个容器，其中有一个侧边和文章，后面有一个独立的页脚，我希望无论内容有多少，页脚总是位于页面的底部。一切都正常，但当我将边距设置为100%高度时，它是视口高度的100%，这意味着在内容很少的页面上，您必须滚动260px（页眉、导航和页脚的组合高度）才能看到它。所以，为了解决这个问题，我把顶部的边距设为280px，底部的边距设为80px，我认为这样就可以了。事实并非如此。因此，我开始使用position and clear，正如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不能用于使两个项目具有相同的高度

您需要使用javascript设置高度，或者使用表格标记。

您可以使用display的“表格”和“表格单元格”值

看看这把小提琴：

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

这是小提琴：

CSS

HTML


这里有一些内容

那不是真的。可以使用

display:table cell

将元素显示为表格单元格。这可能很棘手，而且有局限性（就像表本身一样），但您不需要实际的html表来实现这一点。为了澄清，您是否引用了旁白和文章？因为只有侧边需要100%的高度。因为文章使用默认的背景色，所以它的高度并不重要。是的！calc函数正是我想要的。非常感谢。

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

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

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}

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