我正在使用 Ryan fait 粘性页脚。它运作良好。但我需要像下面这样拆分页眉和页脚之间的空间
在这里 fiddle Fiddle
我有这样的div
<div class='content'>
<div class='firstdiv'>
</div>
<div class='seconddiv'>
</div>
</div>
我想显示像红色和粉红色的框。问题是,如果 first div
或 second div
中有足够的内容(超过屏幕),我就没有 content
的高度像 display:flex
一样增长,但它没有足够的内容整页需要覆盖。我怎样才能做到这一点。
最佳答案
试试这个,但高度将取决于内容。您可以手动设置高度,但您还必须为媒体查询编写样式。
* {
margin: 0;
}
html, body {
height: 100%;
}
.wrapper {
min-height: 100%;
height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */
height: 100%;
margin: 0 auto -55px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
height: 55px; /* .push must be the same height as .footer */
}
.content{
display: inline-flex;
justify-content: space-around;
width: 100%;
height:100%;
//background-color:red;
}
.firstdiv{
width: 25%;
border: 2px solid red;
height: 100px;
}
.seconddiv {
width: 75%;
border: 2px solid green;
height: 100px;
}
<div class="wrapper">
<div class="header">
<h1>CSS Sticky Footer</h1>
</div>
<div class='content'>
<div class='firstdiv'>
</div>
<div class='seconddiv'>
</div>
</div>
</div>
<div class="footer">
<p>This <strong>CSS Sticky Footer</strong> simply stays put.</p>
<p class="copyright">Copyright © 2016 Ryan Fait — <a href="http://ryanfait.com/" title="Las Vegas Web Design">Las Vegas Web Design</a></p>
</div>
关于javascript - 如何在 Ryan fait stick 页脚中拆分页眉和页脚之间的空间,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41361525/