如何解决Flex父级不会扩展到子级的高度
这可能是一个业余问题,因为我刚开始使用Flexbox,但是在创建以下布局时遇到了困难。
https://jsfiddle.net/wp6hsnjo/
我的目标是两行(Main位于顶部,Footer位于底部),然后在Main中包含3列,第一列和最后一列固定,中间的列填充剩余的空间。我遇到的困难是Main容器将不会继承子元素的高度..这会使粘性页脚陷入困境。有没有一种方法可以使Main div扩展以匹配子元素的高度?我曾尝试过设置溢出和高度设置,但没有成功。
html,body {
height: 100%;
}
body {
margin:0;
padding:0;
background-color: #f4f3f0;
box-sizing: border-box;
font-family: arimo,sans-serif;
color: #555760;
}
#container {
max-width:1560px;
margin: 0 auto;
display: flex;
flex-flow: wrap;
min-height: 100vh;
flex-direction: column;
}
#main {
display: flex;
flex: 1 0 auto;
height:auto;
}
header {
padding:30px;
flex: 0 0 100px;
order: 1;
}
#logo-container {
}
.logo {
width:75px;
margin-top:5px;
position:fixed;
}
nav {
width:100px;
text-align: right;
flex: 0 0 100px;
order: 3;
padding:30px;
}
nav ul {
list-style-type: none;
width:100px;
margin: 0;
padding: 0;}
.main-nav {
position:fixed;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #222;
letter-spacing: 0.3px;
}
.main-nav li {
margin-bottom:7px;
}
.social-media {
position: fixed;
bottom:0;
margin-bottom:40px;
text-align: right;
width: 100px;
}
.social-media-icons {
width:16px;
height:16px;
margin-bottom:18px;
}
#page-content {
margin:30px 0 60px 0;
flex: 1;
order: 2;
}
.portfolio {
display: flex;
flex-wrap: wrap;
padding-bottom:300px;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.span2 {
position: relative;
flex-basis: calc(66.666% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
footer {
order: 2;
margin: 0 0 58px 30px;
flex-shrink: 0;
font-size: 12px;
}
.hidden {
opacity: 0;
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 1.4s;
}
<div id="container"> <!-- CONTAINER -->
<div id="main">
<header> <!-- HEADER -->
<div id="logo-container">
<img src="images/icons/logo-black.png" alt="Logo" class="logo">
</div>
</header> <!-- HEADER END -->
<nav>
<ul class="main-nav">
<li>Home</li>
<li>Archive</li>
<li>About</li>
<li>Contact</li>
</ul>
<ul class="social-media">
</ul>
</nav>
<section id="page-content"> <!-- PAGE CONTENT -->
<div class="portfolio">
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="span2">
<div class="content">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
<div class="square">
<div class="content spread">
</div>
</div>
<div class="square">
<div class="content column">
</div>
</div>
</div>
</section> <!-- PAGE CONTENT END -->
</div><!-- MAIN END -->
<footer class="hidden" > <!-- FOOTER -->
<div id="copyright">© 2020 this is the footer</div>
</footer> <!-- FOOTER END -->
</div> <!-- CONTAINER END -->
解决方法
从error C2027: use of undefined type 'std::_Get_function_impl<_Fty>'
with
[
_Fty=void (__cdecl *)(void)
]
C:\PROGRA~2\MIB055~1\2017\Professional\VC\Tools\MSVC\14.16.27023\include\functional(1479): note: see declaration of 'std::_Get_function_impl<_Fty>'
with
[
_Fty=void (__cdecl *)(void)
]
元素中删除flex-flow: wrap
可以解决问题,并从#container
元素中删除300px底部填充,以防止产生多余的空间。
.portfolio
var animateHTML = function() {
var elems;
var windowHeight;
function init() {
elems = document.querySelectorAll('.hidden');
windowHeight = window.innerHeight;
addEventHandlers();
checkPosition();
}
function addEventHandlers() {
window.addEventListener('scroll',checkPosition);
window.addEventListener('resize',init);
}
function checkPosition() {
for (var i = 0; i < elems.length; i++) {
var positionFromTop = elems[i].getBoundingClientRect().top;
if (positionFromTop - windowHeight <= 0) {
elems[i].className = elems[i].className.replace(
'hidden','fade-in-element'
);
}
if ((positionFromTop - windowHeight > 1) || (positionFromTop < 0)) {
elems[i].className = elems[i].className.replace(
'fade-in-element','hidden'
);
}
}
}
return {
init: init
};
};
html,body {
height: 100%;
}
body {
margin:0;
padding:0;
background-color: #f4f3f0;
box-sizing: border-box;
font-family: arimo,sans-serif;
color: #555760;
}
#container {
max-width:1560px;
margin: 0 auto;
display: flex;
min-height: 100vh;
flex-direction: column;
}
#main {
display: flex;
flex: 1 0 auto;
}
header {
padding:30px;
flex: 0 0 100px;
order: 1;
}
#logo-container {
}
.logo {
width:75px;
margin-top:5px;
position:fixed;
}
nav {
width:100px;
text-align: right;
flex: 0 0 100px;
order: 3;
padding:30px;
}
nav ul {
list-style-type: none;
width:100px;
margin: 0;
padding: 0;}
.main-nav {
position:fixed;
text-transform: uppercase;
font-size: 12px;
font-weight: 700;
color: #222;
letter-spacing: 0.3px;
}
.main-nav li {
margin-bottom:7px;
}
.social-media {
position: fixed;
bottom:0;
margin-bottom:40px;
text-align: right;
width: 100px;
}
.social-media-icons {
width:16px;
height:16px;
margin-bottom:18px;
}
#page-content {
margin:30px 0 60px 0;
flex: 1;
order: 2;
}
.portfolio {
display: flex;
flex-wrap: wrap;
}
.square {
position: relative;
flex-basis: calc(33.333% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.span2 {
position: relative;
flex-basis: calc(66.666% - 10px);
margin: 5px;
border: 1px solid #ccc;
box-sizing: border-box;
}
.square::before {
content: '';
display: block;
padding-top: 100%;
}
.square .content {
position: absolute;
top: 0; left: 0;
height: 100%;
width: 100%;
}
footer {
order: 2;
margin: 0 0 58px 30px;
flex-shrink: 0;
font-size: 12px;
}
.hidden {
opacity: 0;
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
.fade-in-element {
animation: fade-in 1.4s;
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。