Html CSS父级和子级使用内容扩展页面_Html_Css

Html CSS父级和子级使用内容扩展页面

html css

Html CSS父级和子级使用内容扩展页面,html,css,Html,Css,现在我到处都看到了同样的问题，但它们都不一样。一个用于浮动，另一个用于三个不同的div。这只是一对父母和一个孩子。这很简单，但我做错了什么。这是站点布局的外观：以下是HTML： <body> <div id="header"> <?php include("../includes/navbar.php"); ?> <div style="clear: both;"></div> </div> <d

现在我到处都看到了同样的问题，但它们都不一样。一个用于浮动，另一个用于三个不同的div。这只是一对父母和一个孩子。这很简单，但我做错了什么。这是站点布局的外观：

以下是HTML：

<body> 
 <div id="header">
  <?php include("../includes/navbar.php"); ?>
  <div style="clear: both;"></div>
 </div>

 <div id="main"> 
  <div id="main-container">
    test<br>
   </div>
 </div>
 <div id="footer">
  <?php include("../includes/footer.php"); ?>
 </div>
</body>

现在使用上面的代码，如果内容超过页面底部，则

#main

和

#content

将一直运行到内容结束。问题是，当

#main

在自动上有一个高度时，

#内容

到达内容末尾后就会停止。我希望它像

#main

一样扩展到页面的末尾，但当有更多内容时，它会继续告诉内容结束

如果你不明白，我很抱歉要解释清楚。

你要的是这个吗

JSFIDLE

我已将其添加到您的主容器中，这样它总是将您的div填充到父div的顶部和底部：

#main-container {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 70%;
}

我希望这有帮助：）否则，我对这个问题不是很了解。

编辑：这种方法的问题是

position:absolute;

子级上的规则，导致父级不填充到子级的底部，导致相对页脚不浮动在#main div之后。

我调整了阿尔普的例子。仅使用相对div，我认为这就是您要查找的内容。

也许您正在查找类似的内容：

加成

有一个关于粘性页脚的例子：-但它看起来并不漂亮，因为主要内容没有占据所有可用高度。读得好：@Alp-Ya，真令人沮丧。我以前看过那个链接，但从来没用过。如果我这样做了，你认为它会对主容器和主容器有帮助吗？我的例子就是按照这个说明进行的。唯一的问题是，如果它跑过，那么页脚和主容器就静止不动，主容器继续运行。我真的不明白你的意思。。你能进一步解释吗？我试试：P。当我把它放进去时，主容器总是像主容器一样延伸到页面底部。这很好，但是如果内容扩展到页面之外，页脚和主页面将保持静止，主内容将继续。我希望他们都能作为一个整体进入下一页。如果你需要我试着让它更有意义，我可以再试一次，或者只是做一些图片：）。我现在明白了：D我会试着把它添加到小提琴上好吧，我已经做了一整天了，我真的不喜欢CSS:P我更喜欢PHP。

position:absolute;

<div id="header">
<h1>Main Title of Web Page</h1></div>
<div id="main">

<div id="main-content">
Content</div>
 </div>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © something</div>

#main
{
    height: 100%;
    background: pink;
    margin: -37px 100px -20px 100px;
    padding: 37px 0 20px 0;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#main-content {
    overflow:auto;
    height:100%;
    min-height: 100%;  
}
#header
{
    position: relative;
    z-index:1;
    height: 37px;
    background:orange;
}
#footer
{
    height: 20px;
    position: relative;
    z-index:1;
}