如何修复使用 flexbox 设计的页脚答案

【问题标题】：How to fix a footer which was designed using flexbox如何修复使用 flexbox 设计的页脚
【发布时间】：2021-09-27 15:24:26
【问题描述】：

我正在尝试克隆 Google 主页并使用 flexbox 设计了页脚，但现在我无法将其放置在页面底部。我该如何解决这个问题，或者有没有其他技术可以解决这个问题。

这是页面的截图和代码。我知道它很乱而且缺乏设计。首先我只是想把结构弄好。

screenshot of the page

```html
<body>
    <div class="heading">
        <div></div>
        <div class="gmail">
            <p>Gmail</p>
        </div>
        <div class="images">
            <p>images</p>
        </div>
        <div class="gapps">
            <button></button>
        </div>
        <div class="dp">
            <p>dp</p>
        </div>
    </div>

    <div class="container">
        <div class="google-logo">
            <img
                src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"
                alt="Google logo"
            />
        </div>
        <div class="search-bar">
            <input
                type="search"
                name="q"
                aria-label="Search through site content"
            />
        </div>
        <div class="search-buttons">
            <div class="search-button">
                <button>Google Search</button>
            </div>
            <div class="feeling-lucky">
                <button>I'm Feeling Lucky</button>
            </div>
        </div>
    </div>

    <div class="footer">
        <div class="srilanka">
            <p>Sri Lanka</p>
        </div>
        <div class="footer-bottom">
            <div class="footer-bottom-left">
                <div class="about">
                    <p>About</p>
                </div>
                <div class="advertising">
                    <p>Advertising</p>
                </div>
                <div class="business">
                    <p>Business</p>
                </div>
                <div class="how-search-works">
                    <p>How Search Works</p>
                </div>
            </div>
            <div class="footer-bottom-right">
                <div class="privacy">
                    <p>Privacy</p>
                </div>
                <div class="terms">
                    <p>Terms</p>
                </div>
                <div class="settings">
                    <p>Settings</p>
                </div>
            </div>
        </div>
    </div>
</body>
```

```css

body {
    height: 100%;
}

body {
    font-size: 14px;
    font-family: arial, sans-serif;
    color: #222;
}

.heading {
    display: flex;
    justify-content: flex-end;
    padding-bottom: 100px;
}

.gmail {
    padding: 0 15px;
}

.images {
    padding: 0 15px;
}

.gapps {
    padding: 0 15px;
}

.dp {
    padding: 0 15px;
}

.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.google-logo {
    padding-bottom: 3vh;
}

.search-bar {
    padding-bottom: 3vh;
}

.search-buttons {
    display: flex;
    justify-content: center;
}

.feeling-lucky {
    padding-left: 2vh;
}

.footer {
    display: flex;
    flex-direction: column;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.footer-bottom-left {
    display: flex;
}

.srilanka {
    padding: 0 15px;
}

.about {
    padding: 0 15px;
}

.advertising {
    padding: 0 15px;
}

.business {
    padding: 0 15px;
}

.how-search-works {
    padding: 0 15px;
}

.privacy {
    padding: 0 15px;
}

.terms {
    padding: 0 15px;
}

.settings {
    padding: 0 15px;
}

.footer-bottom-right {
    display: flex;
    justify-items: flex-end;
}


```

【问题讨论】：

您应该发布您的代码，而不仅仅是屏幕截图。

标签： html css web flexbox frontend

【解决方案1】：

来吧兄弟，在那里添加一点语义

<html>
    <head></head>
     <body>
          <header></header>
           <main></main>
           <footer class=“footer”></footer>
      </body>

你用没关系：flex、flow、grid 因为这些属性是用 display 定义的。如果你想将你的元素设置在底部，我们正在谈论一个位置。

所以你需要设置它的位置

.footer {
  position: fixed;
  left:0;
  bottom:0;
  width:100%;
}

【讨论】：

【解决方案2】：

最好也发布您的代码，而不仅仅是屏幕截图。顺便说一句，您可以在页脚上使用以下代码，它会粘在页面底部

    footer{
    position:fixed;
    bottom: 0
width: 100%
    }

【讨论】：

我做到了。但是当我使用它时，正确的部分会被分离并坚持正常流动。