div如何在页面底部，如果内容很大就让它增长

时间：2015-10-13 10:29:33

标签： css dynamic height

我阅读了很多解决方案，但我并没有完成我的代码。 我有一个带标题/内容/页脚的页面。 我的问题在于内容。 我想要 ：   - 小内容：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。失败。 我尝试：min-height：确定大内容但不适合小内容

更新

我找到了一个简单的解决方案：在页脚上方添加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中参与这张照片。但是当你调整这部分图片时需要按照背景图片（我希望我能清楚） 然后2件事： - 我可以在我的技巧div中制作动态部分图片 - 找另一种方式...... here jsfiddle with background-image

2 个答案:

答案 0 :(得分：1)

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

但我会用你的小提琴。

首先，如果您希望页脚与其他页面之间的距离始终为10px，则可以使用您的网站内容：

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

因为页脚的高度是5％。现在你总是有10px的保证金。

注意我还将你的身体设置为：

height:calc(100% - 10px);

因为你已经使用100％不计算你设置为10px的margin-top。

最后我补充说：

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

因此，如果内容太大而无法在html高度之外流动，则可以滚动内容。

<强> JSFIDDLE

答案 1 :(得分：0)

我搜索了这个技巧，一个好主意来了...如果我在我的内容div下添加一个div（class = AbovFooter）...... 

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

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');
  background-size: cover;
  /* version standardisée */
}
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) !important;
}
.header {
  top: 10px;
  position: relative;
  width: 960px;
  background-color: #ffffff;
  height: 150px;
}

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

.Centre {
  text-align: center;
}

.AGauche {
  float: left;
}

.abovFooter{
  background-color: transparent;
  height:25px;
  }
.BlocAccueil
{
text-align:justify;
padding:10px;
}
</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 class="abovFooter"></div>
    </div>
    <div class="footer Centre">
        text footer
    </div>

</body>
</html>
相关问题
最新问题