html - CSS Flex 容器在 mozilla 中没有根据 child 的高度进行拉伸(stretch)，但在 chrome 中工作正常

我是 flex box 模型的初学者，这是我使用 flex css 属性使用 css3 和 html5 开发的第一个网站，这个网站有一个页脚，在 mozilla 中一半可见，但在 chrome 中工作正常。

如果有人可以查看下面的代码并帮助我，那将非常有帮助。

粘贴 html 以供引用...

<body>
    <div id="main-wrapper">
                    </header>
        <div id="main-content">
            <section id="section-1">
            <header>
            <h2>Integrate Shopify store and QuickBooks Online</h2>
          <!--  <div id="header-side">
                <a href="#">telephone number </a>
            </div>-->
            </header>
            <div id="content-wrapper">
                <div id="left-content">
                    <h3>Automate your accounting</h3>
                    <h3>Save 30 hours / month.</h3>
                    <div id="trial-button">
                        <a href="#"> <h3 id="trial-text">Start Your Free Trial</h3></a>
                    </div>
                    <h4>
                        No Credit Card. Enjoy 15-day full version.
                    </h4>
                </div>
                <div id="right-content">
                    <a href="#"><img id="right-content-bg" src='img/comp.png'></img></a>
                </div>
                <div style="clear:both"></div>
            </div>    <footer>
            <h2>This week, we saved  <span id="footer-number"><h3>1,2340</h3></span>  hours for eCommerce stores</h2>

            </footer>

            </section>
        </div>
    </div>
</body>

粘贴css以供引用，

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
    width:100%;
    max-width:100%;
    display:flex;
    font-family:"Muli" ,sans-serif;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
*{

}
ul{
}
li{
    text-align:center;
    text-decoration:none;
    width:150px;
}
a{
    text-decoration:none;
    color:#4baad3;
}
@font-face{
font-family:duru-sans;
src:url('fonts/DuruSans-Regular.otf');
}
#main-wrapper{
    width:100%;
    max-width:1400px;
    display:flex;
    flex-direction:column;
}
#main-header{
    width:97%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:flex-start;
    padding:10px;
}
#main-header #logo{
    margin-left:8%;
}
#main-nav{
    min-width:680px;
    flex:1;
    display:flex;
    justify-content:flex-end;
}
#main-nav ul{
    min-width:680px;
    width:680px;
    padding:10px;
    display:inline-block;
}
#main-nav li{
    min- width:100px;
    display:inline;
    margin:0 9px;
}
.button{
    border-radius:4px;
    width:100px;
    text-align:center;
}
.button a{
    color:white;
    font-size:14px;
    font-weight:bold;
}
#login-button{
    background:#4baad3;
    padding:8px;
}
#signup-button{
    background:#fbb03b;
    padding:8px;
}
#main-content{
    color:white;
    background:#4baad3;
    display:flex;
    width:100%;

}
#section-1{
    width:100%;
    display:flex;
    flex-direction:column;
    flex-wrap:wrap;
}
#section-1 > header{
    width:100%;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
}
#section-1 >header h2{
font-family:'Gafata',sans-serif;
font-size:50px;
/*min-width:950px;*/
padding:30px 10px;
text-align:center;
margin-right:40px;
flex:1
}
/*
#header-side{
background:url('img/contactBg.png') no-repeat;
background-position:-10px 0px;
margin-right:-180px;
height:75px;
}*/
#content-wrapper{
display:flex;
flex-direction:row;
flex-wrap:wrap;
margin-bottom:5%;
padding-bottom:10px;
}
#left-content{
    flex:1;
    display:flex;
    flex-direction:column;
    justify-content:center;
    min-width:600px;
}
#left-content h3{
font-family:duru-sans;
font-size:25px;
margin-bottom:30px;
text-align:left;
margin-left:15%;
}
#trial-button{
    background:#fbb03b;
    width:270px;
    border-radius:3px;
    padding:20px;
    text-align:center;
    height:25px;
    margin-bottom:15px;
    margin-left:15%;
}
#trial-text{
margin-left:0px !important;
}
#trial-button a{
color:white;
}
#left-content h4{
text-align:left;
margin-left:10px;

}
#right-content{
    flex:2;
    min-width:500px;
    text-align:center;

}
#right-content-bg{
    src:url('img/comp.png') no-repeat;
    width:80%;


    }
h4{
margin-left:16% !important;
}
#section-1 footer{
flex:1;
text-align:center;
margin-bottom:5%;
}
#section-1 footer h2{
    text-align:center;
    font-size:30px;
    display:inline-block;    
}
#footer-number{
 display:inline-block;
 border-radius:8px;
 background:white;
 color:#4baad3;
 padding:10px;
 }
 #menu-button{
    display:none;
}

我不确定这是因为 mozilla 问题还是它与我的代码有关。不过在 chrome 中它看起来不错。

最佳答案

您好，您可能想先整理一下您的 css 规则 - 有一大堆规则:

#main-nav
.button
*, ul
..

只是不适用于 HTML 或为空:-)

你还有:

流氓 HTML 标记行 3
出于本练习的目的，也可以删除注释掉的部分
使用了一个已经从 HTML5 规范中移除的元素，即 hgroup

注意:您应该使用像 Webstorm 这样的 IDE 来帮助您对整个代码提供指导:-)

否则您可以尝试以下方法 - 包括背景颜色以帮助查看 flex 的效果:

<div id="main-wrapper">
    <div id="main-content">
        <section id="section-1" class="flex-container-section">
            <header>
                <h2>Integrate Shopify store and QuickBooks Online</h2>
            </header>
            <div id="content-wrapper" class="flex-container-content">
                <div id="left-content">
                    <h3>Automate your accounting</h3>

                    <h3>Save 30 hours / month.</h3>

                    <div id="trial-button">
                        <a href="#"><h3 id="trial-text">Start Your Free 
                        Trial</h3></a>
                    </div>
                    <h4>
                        No Credit Card. Enjoy 15-day full version.
                    </h4>
                </div>
                <div id="right-content">
                    <a href="#"><img id="right-content-bg" 
                    src='img/comp.png'></img></a>
                </div>
                <div style="clear:both"></div>
            </div>
            <footer class="flex-container-footer">
              <h2>This week, we saved</h2> 
              <span id="footer-number">      
                  <h2>&nbsp;1,2340&nbsp;</h2>
              </span> 
              <h2>hours for eCommerce stores</h2>
            </footer>
        </section>
    </div>
</div>

使用 CSS:

.flex-container-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: green;
}

.flex-container-content {    
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    background-color: blue;
}

.flex-container-content #left-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: no-wrap;
    align-items: flex-start;
    background-color: pink;
}
.flex-container-content #right-content {
    width: 50%;
    display: flex;
    flex-direction: column;
    flex-wrap: no-wrap;
    align-items: flex-start;
    background-color: yellow;
}  

.flex-container-footer {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    background-color: red;
}

你可以在这里看到结果:

http://codepen.io/Kebten/pen/EjPJLo

关于html - CSS Flex 容器在 mozilla 中没有根据 child 的高度进行拉伸(stretch)，但在 chrome 中工作正常，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24189499/

html - CSS Flex 容器在 mozilla 中没有根据 child 的高度进行拉伸(stretch)，但在 chrome 中工作正常

上一篇：html - 将 div 元素的高度应用为与其中的 div 一样多

下一篇：html - 移动带有图像的文本(宽度 100%)