个人中心
gpt4 book ai didi

html - 使用 flex 在没有设置宽度的情况下向下推送内容

转载 作者：行者123 更新时间：2023-11-28 16:06:14 25 4
gpt4 key购买 nike

有人可以帮助我使用 flex 来向下压我的页脚/扩展内容以适应吗？

https://jsfiddle.net/9xjy78gj/

希望从网站上可以清楚地看到我的问题是什么。

我只想使用 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;
}

最佳答案

Flexbox 可以做到这一点提供你像这样使用flex-direction:column:

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

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;
}
<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>

关于html - 使用 flex 在没有设置宽度的情况下向下推送内容，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39183277/

25 4 0
文章推荐： html - 如何将元素从左侧移动到右侧？
文章推荐： jquery - 如何使用 jquery 添加类 'active'
文章推荐： ios - Swift/如何修复 : TableView bottom cells missing in size of the UINavigationBar
文章推荐： html - 我的 iframe 根本不会居中
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com