[英]How to split space between header and footer in Ryan fait stick footer
I am using Ryan fait sticky footer. 我正在使用Ryan fait粘性页脚。 it works well.
它运作良好。 but I need to split the space between header and footer like below
但是我需要像下面这样在页眉和页脚之间划分空间
I have divs like 我有像
<div class='content'>
<div class='firstdiv'>
</div>
<div class='seconddiv'>
</div>
</div>
I want to display like red and pink boxes. 我想显示像红色和粉红色的框。 The problem is I don't have height for
content
if have enough content (more than a screen) in first div
or second div
it needs to equally grow like display:flex
but it doesnot have enough content fullpage needs to be cover. 问题是我没有对身高
content
,如果有足够的内容(多画面) first div
或second div
它需要同样长像display:flex
,但它亘古不变的有足够的内容全页需要被盖。 how can I achieve this. 我怎样才能做到这一点。
Try this but the height will depend on the content. 试试这个,但是高度取决于内容。 You can set the height manually but you also have to write styling for media queries.
您可以手动设置高度,但也必须为媒体查询编写样式。
* { 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.