粘性页脚横向打破
问题描述:
我的粘性页脚不能横向打印。我试图创建两个div,每个div的高度相同,当移动设备(宽度为749px或更小)处于纵向时,它们将共同占用页眉和页脚之间的所有可用高度。但是,当设备处于横向模式时,我希望divs保持最小高度为172像素。粘性页脚横向打破
另外,在每个div中,我想嵌套一个垂直和水平居中,较小的div。
在纵向上一切看起来都很好。横向放置时,页脚停在视口的底部,而不是放在第二个div的底部。
“.index-content”是我正在使用/试图用来将页脚保留在页面底部的div。标题的固定高度为192px - 页脚的固定高度为32px(2em)。
我注意到,在横向方向上,html和body元素只伸展到视口的底部。但是,我将每个人的身高设置为100%,所以我不明白为什么会发生这种情况。这是我的元标记问题吗?
我确信解决方案有点显而易见,但我一直无法把它解决。任何帮助,将不胜感激!
@media screen and (min-width: 0px) and (max-width: 749px) {
/* -------Header and footer stuff start-----*/
* {
box-sizing: border-box;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.index-content {
min-height: calc(100% - 2em);
padding: 0;
margin: 0;
height: calc(100% - 2em);
}
.footer {
height: 2em;
background-color: black;
}
header {
height: 192px;
background-color: black;
}
/*------Header and footer stuff end--------*/
/*-------Services stuff---------*/
.wrapper-content {
max-width: 80%;
margin: 0 auto;
padding: 0;
height: calc(100% - 192px);
}
.services-one {
height: 50%;
background-color: blue;
min-height: 172px;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-one-sub-one {
height: 95%;
width: 95%;
background-color: red;
}
.services-two {
height: 50%;
background-color: green;
min-height: 172px;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-two-sub-one {
height: 95%;
width: 95%;
background-color: yellow;
}
}
<div class="index-content">
<header>
</header>
<div class="wrapper-content">
<div class="services-one">
<div class="services-one-sub-one">
</div>
</div>
<div class="services-two">
<div class="services-two-sub-one"></div>
</div>
</div>
</div>
<footer class="footer">
<p>footer text</p>
</footer>
答
更换100%的高度和100vh,还有一些小tweeks按下面的代码:
如果你想箱内显示,在横向模式下某些特定高度(其中高度是如此之少),将min-height指定给wrapper-content类。
@media screen and (min-width: 0px) and (max-width: 749px) {
/* -------Header and footer stuff start-----*/
* {
box-sizing: border-box;
margin: 0;
}
.index-content {
min-height: calc(100vh - 2em);
padding: 0;
margin: 0;
}
.footer {
height: 2em;
background-color: black;
}
header {
height: 8em;
background-color: black;
}
/*------Header and footer stuff end--------*/
/*-------Services stuff---------*/
.wrapper-content {
max-width: 80%;
margin: 0 auto;
padding: 0;
height: calc(100vh - 10em);
}
.services-one {
height: 50%;
background-color: blue;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-one-sub-one {
height: 95%;
width: 95%;
background-color: red;
}
.services-two {
height: 50%;
background-color: green;
max-width: 256px;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;
}
.services-two-sub-one {
height: 95%;
width: 95%;
background-color: yellow;
}
}
<div class="index-content">
<header>
</header>
<div class="wrapper-content">
<div class="services-one">
<div class="services-one-sub-one">
</div>
</div>
<div class="services-two">
<div class="services-two-sub-one"></div>
</div>
</div>
</div>
<footer class="footer">
<p>footer text</p>
</footer>
这工作,谢谢!我有两个问题处理为什么 - 1)我的印象是,如果我想在子div上使用百分比高度(本例中的“子”divs),我必须明确指出每个父级的百分比高度链 - 因此100%的HTML和身高,以及索引内容的最小高度和高度声明。这是错误的? 2)为什么最小高度的包装内容,而不是“服务一”和“服务二”的div?谢谢,如果你有时间回答。如果这是糟糕的礼节,请让我知道。 – cliffgallagher
如果可能,请尝试赞扬我的答案。 –
我做到了。我没有太多的要公开记录的点数,但它表示它被保存了...... – cliffgallagher