Question

请有人帮助我使用flex来推动我的页脚/扩展内容以适应吗？

希望从网站上看到我的问题是明确的。

我只是想使用flex来向下推动页脚并适当扩展内容div，如果可能的话，不使用内容div等的设置高度？

非常感谢！

HTML

<!DOCTYPE html>
<html>
<head>
</head>     
<body>
    <div id="page_wrap">
            <header>
                <a href="/">
                    <h1>Close<span><i class="fa fa-map-marker" aria-hidden="true"></i></span>Range</h1>
                    </a>
                    <hr />
            </header>

            <div id="refinement">
                <form>
                    <div class="form_component">
                        <select id="narrow">
                            <option value="select" selected disabled>Please Select</option>
                        </select>
                    </div>
                    <div class="form_component">
                        <input id="driving" type="radio" name="travelmode" value="Driving" checked /> <i class="fa fa-car" aria-hidden="true"></i>
                    </div>
                    <div class="form_component">
                        <input id="walking" type="radio" name="travelmode" value="Walking" /> <i class="fa fa-male" aria-hidden="true"></i>
                    </div>
                </form>
            </div>
            <div id="jquery_placeholder">
                    <!-- JQuery loads PHP output into here-->
                </div>
            <div id="place_results_wrap">   
                <!-- and here -->   
                <div id="content">
                    <h2>Let's explore!</h2>
                    <i class="fa fa-globe" aria-hidden="true"></i>
                </div>
            </div>
            <footer class="footer">
                <div id="google">
                    <img src="/assets/i/google.png" alt="Powered by Google" />
                </div>  
            </footer>
        </div>  
  </body>
</html>

CSS

a, a:hover
    {
        text-decoration: none;
    }

body
{
    font-family: 'Open Sans', sans-serif;
    background: #ECECEA;
    font-size:16px;
}

#page_wrap
{
    width:100%;
}

header
{
    background: #fff;
    text-align: center;
    padding: 1.250em;
}

header h1
{
    font-size: 6em;
    font-weight: 400;
    color: #655e5e;
    margin: 0;
    display: inline-block;
}

    @media screen and (max-width: 550px)
    {
            header h1 {
                font-size: 3em;
            }

    }

header hr
{
    max-width: 36em;
    margin-bottom: 0px;
}

header .fa-map-marker
{
    color: #ec3b3b;
    font-size: 1.2em;
}

#refinement
{
    padding: 0.5em 1.25em 1.25em;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
}

#refinement form
{
    display: flex;
    justify-content: center;
}

.form_component
{
    margin: 0 0.4em;
    display: none;
}

.form_component i.fa
{
    font-size: 1.4em;
    color: #655e5e;
}

#content
{
    text-align: center;
    background: #655e5e;
    padding: 1.25em;
}
#content h2
{
    color: #fff;
    font-weight: 400;
    font-size: 4em;
    margin: 0;
}


        @media screen and (max-width: 415px) {

            #content h2
            {
                font-size:2em;
            }

        }

#content i.fa-globe
{
    font-size: 18em;
    color: #fff;
}

.place_results
{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1.25em 0;
}

.next_page
{
    padding: 0 1.250em;
    width: 100%;
    text-align: center;
}

.next_page button
{
    background-color: #fff;
    border: none;
    color: #655e5e;
    padding: 0.3125em 2em;
    text-decoration: none;
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    cursor: pointer;
    border-radius: 1.25em;
}
.next_page button:hover
{
    background-color: #f6f6f6;
}

.place
{
    width: 24em;
    height: 27em;   
    margin: 1.25em;
    display: flex;
    flex-direction: column;
    -webkit-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
    -moz-box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
    box-shadow: 5px 6px 20px 0px rgba(158,155,158,0.75);
    background: #fff;
}

    @media screen and (max-width: 1920px) {

            .place
            {
                    width: 30%;
            }

        }

        @media screen and (min-width: 900px)
                      and (max-width: 1366px){

            .place
            {
                width: 45%;
            }

        }


        @media screen and (min-width: 768px)
                      and (max-width: 1366px){

            .place
            {
                width: 44%;

            }

        }

        @media screen and (min-width: 415px)
                      and (max-width: 760px){

            .place
            {
                width: 90%;

            }

        }



        @media screen and (max-width: 415px) {

            .place
            {
                width: 90%; 
            }

        }

.place_image
{

    width: 100%;
    height: 14.0625em;  
    background-size: cover !important;
    background-clip: content-box !important;
}

.place_description
{
    padding: 0.625em;
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    background: #fff;
}

.distance_container p.distance
{
        font-weight:600;
}

.place_description p, .place_description a
{
    color: #655e5e;
    font-weight: 400;
    margin: 0;
}

.place_description .place_open p
{
    margin: 0;
    color: #49b51c;
}

.place_description i.fa
{
    width: 1.25em;
}

.place_title
{
    flex: 1 1 0;
}

.place_title h3
{
    color: #655e5e;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    margin: 0;
    font-size: 1.4em;
    line-height: 1.3;
}

@media screen and (max-width: 415px) {

            .place_title h3
            {
                    font-size: 1.2em;
            }

        }


.rating_container
{
    width: 100%;
}

.rating_bar {

    width: 6.875em;
    height: 1.313em;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);  
    background-repeat: repeat-x;    
    background-position: 0 0;
}
.rating {
    height: 1.313em;
    background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/2605/star-rating-sprite.png);
    background-position: 0 100%;
    background-repeat: repeat-x;
}

.place_description .place_location
{
    margin-bottom: 0.625em;
}

.place .distance_container, .place .vicinity_container, .place .place_phone_container
{
    display: flex;
}

#load_container
{
    padding: 1.25em;
    text-align: center;
}

#load i.fa-spin
{
    font-size: 4em;
    color: #ec3b3b;
}

#jquery_placeholder
{
    display:none;
    width:100%;
}

footer
{
    padding: 1.25em;
    text-align: right;
    background: #fff;
}

footer #google img
{
    width: 10em;
}

#error
{
    padding: 1.25em;
    background: #ec3b3b;
}

#error p
{
    font-size: 1.2em;
    margin: 0;
    color: #fff;
    text-align: center;
}

#error i.fa-exclamation-circle
{
    color: #fff;
}

Answer 1

Flexbox可以这样做提供，就像这样使用flex-direction:column：

如果您不想扩展部分以占用空间，请删除flex:1。

＆＃13;

html,
body {
  height: 100%;
}
body {
  min-height: 100%;
  text-align: center;
  /* for demo */
}
.page-wrap {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
header {
  background: pink;
}
footer {
  background: rebeccapurple;
  color: #fff;
}
aside {
  flex: 1;
  background: orange;
}
main {
  flex: 1;
  background: grey;
}

＆＃13;

<div class="page-wrap">
  <header>
    <h1>Header</h1>
  </header>
  <aside>I'm a secondary header</aside>
  <main>I'm main content</main>
  <footer>
    <h1>Footer</h1>
  </footer>
</div>

＆＃13;

使用flex将内容向下推，没有设置宽度

1 个答案: