css - 如果内容很大，div 如何位于页面底部并让它增长

我阅读了很多解决方案，但我没有最终分析我的代码。我有一个页眉/内容/页脚。我的问题是里面的内容。我想 : - 小内容:div 绘制直到我的页脚上方 10px。 - Gib 内容:div 增长，当我滚动到底部时，我想要在 div 和页脚之间再次留出 10px。

这是我的尝试之一:jsfiddle

<html xmlns="http://www.w3.org/1999/xhtml">

<div class="page">
    <div class="header">
            <img  style="border: 0; height: 150px;" src="http://www.vinaigremalin.fr/wp-content/uploads/2009/12/voiture-qui-sourit.jpg" />
    </div>
    <div class="contenu Centre">
       <div class="BlocAccueil">

    <div class="AGauche" style="margin:10px;">
        <img src="https://www.themilliardaire.com/wp-content/uploads/2011/07/2011-Koenigsegg-Agera.jpg" style="width: 300px;" />
        </div>
    <div>
        Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker
    </div>
</div>
    </div>

</div>
<div class="footer Centre">
    text footer
</div>

</body>
</html>

和CSS

img {
  max-width: 100%;
  height: auto;
}
html {
  height: 90%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background-color: black;
  background-size: cover;
}
body {
  font-size: 16px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', Arial, 'Times New Roman', "Helvetica Neue", "Segoe UI", Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}
.page {
  position: relative;
  width: 960px;
  margin: 10px auto 0 auto;
  min-height: 100% ;
}
.header {
  top: 0;
  position: absolute;
  width: 960px;
  background-color: #ffffff;
  height: 150px;
}

.contenu {
  position: absolute;
  width: 960px;
  top: 180px;
  background-color: white;
  bottom: 0;
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #222324;
  color: #fff;
  height: 5%;
}

.Centre {
  text-align: center;
}

.AGauche {
  float: left;
}
.BlocAccueil {
    width: 85%;
  display: inline-block;
  text-align: left;
  margin: 10px;
  color: black;
  font-weight: bold;
  background-color: white;
}
}

小内容没问题，大内容不行。

我也试过:flex/flex-direction:column。失败的。我尝试:最小高度:大内容可以，但小内容不行

更新

我找到了一个简单的解决方案:在页脚上方放置一个 div 颜色。

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1">
<style  >

img {
  max-width: 100%;
  height: auto;
}
html {
  height: calc(100% - 10px);
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url('http://www.vinaigremalin.fr/wp-content/uploads/2009/12/voiture-qui-sourit.jpg') no-repeat center fixed;
  background-size: cover;
}
body {
  font-size: 16px;
  font-family: 'Lucida Sans Unicode', 'Lucida Grande', Arial, 'Times New Roman', "Helvetica Neue", "Segoe UI", Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  height: 100%;
}
.page {
  position: relative;
  width: 960px;
  margin: 10px auto 0 auto;
  min-height: calc(100% - 20px) ;
}
.header {
  top: 0;
  position: absolute;
  width: 960px;
  background-color: #ffffff;
  height: 150px;
}

.contenu {
position:relative;
width: 960px;
top: 180px;
background-color: white;
min-height: calc(100% - 180px);
}
.footer {
  width: 100%;
  position: fixed;
  bottom: 0;
  background-color: #222324;
  color: #fff;
  height: 25px;
}
.abovFooter{width: 100%;
  position: fixed;
  bottom: 25px;
  background-color: black;
  height: 30px;
  }

.Centre {
  text-align: center;
}

.AGauche {
  float: left;
}
.BlocAccueil {
  width: 85%;
  display: inline-block;
  text-align: left;
  margin: 10px;
  color: black;
  font-weight: bold;
  background-color: white;
  padding-bottom:50px;
}
</style>
</head>
<body>

<div class="page">
    <div class="header">
        My Header
    </div>
    <div class="contenu Centre">
       <div class="BlocAccueil">

            <div class="AGauche" style="margin:10px;">
                <img src="https://www.themilliardaire.com/wp-content/uploads/2011/07/2011-Koenigsegg-Agera.jpg" style="width: 300px;" />
            </div>
        <div >
            Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression. Le Lorem Ipsum est le faux texte standard de l'imprimerie depuis les années 1500, quand un peintre anonyme assembla ensemble des morceaux de texte pour réaliser un livre spécimen de polices de texte. Il n'a pas fait que survivre cinq siècles, mais s'est aussi adapté à la bureautique informatique, sans que son contenu n'en soit modifié. Il a été popularisé dans les années 1960 grâce à la vente de feuilles Letraset contenant des passages du Lorem Ipsum, et, plus récemment, par son inclusion dans des applications de mise en page de texte, comme Aldus PageMaker
        </div>
    </div>
</div>

</div>
<div class="abovFooter"></div>
<div class="footer Centre">
text footer
</div>

</body>
</html>

喜欢enter link description here

现在，我的问题是背景不是黑色而是图片。通过我的技巧，我需要在我的新 div 中拍摄这张照片的一部分。但是当你调整这部分图片的大小时需要跟随背景图片(我希望我清楚) 然后两件事: - 我可以在我的技巧 div 中制作动态部分图片 - 换个方式... here jsfiddle with background-image

最佳答案

我不会像您那样限制htlm 或body 的高度。最好给它们 100% 高度，然后限制所有元素(页眉、页脚和内容)的容器高度。

但我会用你的 fiddle 。

首先，如果您希望页脚和其余部分之间始终保持 10 像素的距离，无论您使用的网站内容是什么:

html {
  height:calc(95% - 10px);
}

因为您的页脚高度为 5%。现在您将始终拥有 10 像素的边距。

注意我还将你的 body 设置为:

height:calc(100% - 10px);

因为你已经使用了 100%，不包括你设置为 10px 的 margin-top。

最后我补充说:

.page { 
     overflow-X: hidden;
    overflow-y: auto;
}

因此，如果您的内容太大，您可以滚动它，它不会超出您的 html 高度。

JSFIDDLE

关于css - 如果内容很大，div 如何位于页面底部并让它增长，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33100332/

css - 如果内容很大，div 如何位于页面底部并让它增长

更新

上一篇：css - LESS mixin 中的可变参数列表

下一篇：html - 使用 CSS 将图像与文本垂直对齐