如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做

【问题标题】：How do I get this footer to line up with the textarea? Flexbox doesn't seem to do it如何让此页脚与 textarea 对齐？ Flexbox 似乎没有这样做
【发布时间】：2021-02-06 04:23:14
【问题描述】：

我希望底部的文本居中并与文本框对齐。如果我添加边距，它只适用于我当前的屏幕尺寸，但是当我将页面拖动到另一个尺寸的显示器时，间距会变得混乱。如何以文本区域居中此页面的底部？这是我的代码：

* {
  box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;
}
#flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Heebo', sans-serif;


}


.contact-section {
    text-align: center;
    width: 100%;
    height: 77vh;
    background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
    /* background-size: center; */
    background-position: center;
    color: white;
    margin-top: 2.5rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact-section__text {
    font-weight: 700;
    font-size: x-large;
}

label {
    display: none;
} 

.contact input,
.contact textarea {
    margin: .5rem;
    font-weight: 1000;

} 
.contact textarea {
    margin-right: 1.25rem;
}
.contact-section__btn {
    padding: 12px 26px;
    border-radius: 7px;
    background: rgb(201, 83, 5);
    border: none;
    color: white;
    font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
    background-color: white;
    color: rgb(201, 83, 5);
    cursor: pointer;

}

input[type="text"], [type="email"], textarea {
    background-color: rgb(247, 204, 175);
    border-color: rgb(201, 83, 5);
    width: 400px;
    height: 35px;
    margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
    width: 400px;
    height: 200px;
    vertical-align: top;
}
.email-form {
    margin-right: .80rem;
}
.addresses {
    /* background-color: rgb(99, 99, 99); */
    background-color:rgb(201, 83, 5);
    color: white;
    /* margin-top: 2rem; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    /* padding-inline-start: 0; */
    justify-content: space-evenly;
}

.addresses__info1 {
    flex-direction: column;

}
.addresses__info2 {
    flex-direction: column;
}
.main_footer {

  /* background-color:rgb(99, 99, 99); */
  background-color:rgb(201, 83, 5);
    margin-top: 3.5rem;
    flex-direction: column;
}

.footer_links  { /*li*/
  margin: 0;
}

.footer_lists  { /*ul*/
  list-style: none;
  margin: 0;
    text-align: center;
    padding-inline-start: 0;
}

.footer_links a { /*li a*/
  color:white;
  text-decoration: none;
  font-size: 1.1rem;

}
.footer_links :hover {
  text-decoration-line: underline;
}
 <!DOCTYPE html>

<html>
  <head>
      <title>Contact | Feel free to email or call Us!</title>
      <link rel="stylesheet" type="text/css" href="contact.css">
      <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
      <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
      <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


  </head>

  <body>
    <nav>
        <ul class="nav_list">
            <li ></li>
            <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
            <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
            <li class="nav_lists"><a href="contact.html">Contact</a></li>
            <li class="nav_lists"><a href="services.html">Our Services</a></li>
        </ul>
    </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
            Shoot us an email or Give us a call!<br>
            We are always happy to answer any questions you may have!<br>
        </p>
      </div>
        <form action="" method="POST" class="contact">
            <div>
                <label for="name">Your Name</label>
                <input id="name" type="text"  placeholder="Your name" required>
            </div>
            <div class="email-form">
                <label for="email">Your Email</label>
                <input id="email" type="email" placeholder="Your email" required>
            </div>
            <div class="contact__txtarea">
                <label for="text">Message</label>  
                <textarea  class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
            </div>
            <div>
                <input class="contact-section__btn" type="submit" value="Send Message" required> 
            </div>
        </form>
    </section>


    <section class="addresses">
        <div class="addresses__info1">
            <p>Finds us on:</p>
            <img src="img/you.svg" alt="Youtube">
            <img src="img/insta.svg" alt="Instagram">
            <img src="img/face.svg" alt="Facebook">

            <p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
            Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
        </div>


        <div class="addresses__info2">
            <p>Calle Maria 63 Oficina 702<br>
            Medellin 4665684<br>
            Colombia<br></p>

            <p>Tuesday-Saturday<br>
            9AM - 6PM COT<br></p>

        </div>

        <footer class="main_footer">
        <ul class="footer_lists">
            <li class="footer_links"><a href="terms.html">Terms</a></li>
            <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
        </ul>
        </footer> 

    </section>

<!--</section>-->
  </main>
</body>
</html>

【问题讨论】：

    标签： css flexbox center footer


    【解决方案1】：

    试试这个：

    * {
  box-sizing: border-box;
}

body {
  margin: 0;
  height: 100%;
}

#flex-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: 'Heebo', sans-serif;
}

.contact-section {
  text-align: center;
  width: 100%;
  height: 77vh;
  background: linear-gradient( rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)), url(img/colo.png);
  /* background-size: center; */
  background-position: center;
  color: white;
  margin-top: 2.5rem;
  padding: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-section__text {
  font-weight: 700;
  font-size: x-large;
}

label {
  display: none;
}

.contact input,
.contact textarea {
  margin: .5rem;
  font-weight: 1000;
}

.contact textarea {
  margin-right: 1.25rem;
}

.contact-section__btn {
  padding: 12px 26px;
  border-radius: 7px;
  background: rgb(201, 83, 5);
  border: none;
  color: white;
  font-size: 1.05rem;
}

.contact-section__btn:hover,
.contact-section__btn:focus {
  background-color: white;
  color: rgb(201, 83, 5);
  cursor: pointer;
}

input[type="text"],
[type="email"],
textarea {
  background-color: rgb(247, 204, 175);
  border-color: rgb(201, 83, 5);
  width: 400px;
  height: 35px;
  margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
  width: 400px;
  height: 200px;
  vertical-align: top;
}

.email-form {
  margin-right: .80rem;
}

.addresses {
  /* background-color: rgb(99, 99, 99); */
  background-color: rgb(201, 83, 5);
  color: white;
  /* margin-top: 2rem; */
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  text-align: center;
  /* padding-inline-start: 0; */
}

.addresses__info1 {
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.addresses__info2 {
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.main_footer {
  /* background-color:rgb(99, 99, 99); */
  background-color: rgb(201, 83, 5);
  margin-top: 3.5rem;
  flex-direction: column;
  width: 1rem;
  flex-grow: 1;
}

.footer_links {
  /*li*/
  margin: 0;
}

.footer_lists {
  /*ul*/
  list-style: none;
  margin: 0;
  text-align: center;
  padding-inline-start: 0;
}

.footer_links a {
  /*li a*/
  color: white;
  text-decoration: none;
  font-size: 1.1rem;
}

.footer_links :hover {
  text-decoration-line: underline;
}
    <!DOCTYPE html>

<html>

<head>
  <title>Contact | Feel free to email or call Us!</title>
  <link rel="stylesheet" type="text/css" href="contact.css">
  <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
  <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
  <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


</head>

<body>
  <nav>
    <ul class="nav_list">
      <li></li>
      <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
      <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
      <li class="nav_lists"><a href="contact.html">Contact</a></li>
      <li class="nav_lists"><a href="services.html">Our Services</a></li>
    </ul>
  </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
          Shoot us an email or Give us a call!<br> We are always happy to answer any questions you may have!<br>
        </p>
      </div>
      <form action="" method="POST" class="contact">
        <div>
          <label for="name">Your Name</label>
          <input id="name" type="text" placeholder="Your name" required>
        </div>
        <div class="email-form">
          <label for="email">Your Email</label>
          <input id="email" type="email" placeholder="Your email" required>
        </div>
        <div class="contact__txtarea">
          <label for="text">Message</label>
          <textarea class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
        </div>
        <div>
          <input class="contact-section__btn" type="submit" value="Send Message" required>
        </div>
      </form>
    </section>


    <section class="addresses">
      <div class="addresses__info1">
        <p>Finds us on:</p>
        <img src="img/you.svg" alt="Youtube">
        <img src="img/insta.svg" alt="Instagram">
        <img src="img/face.svg" alt="Facebook">

        <p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br> Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
      </div>


      <div class="addresses__info2">
        <p>Calle Maria 63 Oficina 702<br> Medellin 4665684<br> Colombia
          <br></p>

        <p>Tuesday-Saturday<br> 9AM - 6PM COT<br></p>

      </div>

      <footer class="main_footer">
        <ul class="footer_lists">
          <li class="footer_links"><a href="terms.html">Terms</a></li>
          <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
        </ul>
      </footer>

    </section>

    <!--</section>-->
  </main>
</body>

</html>

    【讨论】：

    • 成功了！你到底做了什么改变了它？
    • 我在页脚中定义了每个部分的大小，并让它随着 flex 增长。查看地址项的更改
    【解决方案2】：

    所以首先你正在做一个 html 结构错误。您正在尝试将 footer 设置为 main，但它应该已退出。

    身体结构应该是这样的：

    <body>
   <header></header>
   <main></main>
   <footer></footer>
</body>

    那么你在contact-section 中设置height: 77vh; 尝试设置min-heigth: 77vh; 以使其更灵活。

    如果您想删除页脚上的白色条，只需从您的 footer 中删除 margin-top。但是，如果你所有的橙色部分都是页脚，那么你应该将它全部设置在页脚中，而不是在 section 和 footer 中分隔它

    演示

    * {
  box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;
}
#flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Heebo', sans-serif;


}


.contact-section {
    text-align: center;
    width: 100%;
    min-height: 77vh;     /* Replaced from height to min-height */
    background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
    /* background-size: center; */
    background-position: center;
    color: white;
    margin-top: 2.5rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact-section__text {
    font-weight: 700;
    font-size: x-large;
}

label {
    display: none;
} 

.contact input,
.contact textarea {
    margin: .5rem;
    font-weight: 1000;

} 
.contact textarea {
    margin-right: 1.25rem;
}
.contact-section__btn {
    padding: 12px 26px;
    border-radius: 7px;
    background: rgb(201, 83, 5);
    border: none;
    color: white;
    font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
    background-color: white;
    color: rgb(201, 83, 5);
    cursor: pointer;

}

input[type="text"], [type="email"], textarea {
    background-color: rgb(247, 204, 175);
    border-color: rgb(201, 83, 5);
    width: 400px;
    height: 35px;
    margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
    width: 400px;
    height: 200px;
    vertical-align: top;
}
.email-form {
    margin-right: .80rem;
}
.addresses {
    /* background-color: rgb(99, 99, 99); */
    background-color:rgb(201, 83, 5);
    color: white;
    /* margin-top: 2rem; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    /* padding-inline-start: 0; */
    justify-content: space-evenly;
}

.addresses__info1 {
    flex-direction: column;

}
.addresses__info2 {
    flex-direction: column;
}
.main_footer {

  /* background-color:rgb(99, 99, 99); */
  background-color:rgb(201, 83, 5);
    /*margin-top: 3.5rem;*/
    flex-direction: column;
}

.footer_links  { /*li*/
  margin: 0;
}

.footer_lists  { /*ul*/
  list-style: none;
  margin: 0;
    text-align: center;
    padding-inline-start: 0;
}

.footer_links a { /*li a*/
  color:white;
  text-decoration: none;
  font-size: 1.1rem;

}
.footer_links :hover {
  text-decoration-line: underline;
}
    <!DOCTYPE html>

<html>
  <head>
      <title>Contact | Feel free to email or call Us!</title>
      <link rel="stylesheet" type="text/css" href="contact.css">
      <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
      <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
      <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


  </head>

  <body>
    <nav>
        <ul class="nav_list">
            <li ></li>
            <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
            <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
            <li class="nav_lists"><a href="contact.html">Contact</a></li>
            <li class="nav_lists"><a href="services.html">Our Services</a></li>
        </ul>
    </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
            Shoot us an email or Give us a call!<br>
            We are always happy to answer any questions you may have!<br>
        </p>
      </div>
        <form action="" method="POST" class="contact">
            <div>
                <label for="name">Your Name</label>
                <input id="name" type="text"  placeholder="Your name" required>
            </div>
            <div class="email-form">
                <label for="email">Your Email</label>
                <input id="email" type="email" placeholder="Your email" required>
            </div>
            <div class="contact__txtarea">
                <label for="text">Message</label>  
                <textarea  class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
            </div>
            <div>
                <input class="contact-section__btn" type="submit" value="Send Message" required> 
            </div>
        </form>
    </section>


    <section class="addresses">
        <div class="addresses__info1">
            <p>Finds us on:</p>
            <img src="img/you.svg" alt="Youtube">
            <img src="img/insta.svg" alt="Instagram">
            <img src="img/face.svg" alt="Facebook">

            <p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
            Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
        </div>


        <div class="addresses__info2">
            <p>Calle Maria 63 Oficina 702<br>
            Medellin 4665684<br>
            Colombia<br></p>

            <p>Tuesday-Saturday<br>
            9AM - 6PM COT<br></p>

        </div>

    </section>

<!--</section>-->
  </main>
  
  <footer class="main_footer">
    <ul class="footer_lists">
        <li class="footer_links"><a href="terms.html">Terms</a></li>
        <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
    </ul>
  </footer> 
</body>
</html>

    带有 1 页脚的演示

    * {
  box-sizing: border-box;
}

body {
    margin: 0;
    height: 100%;
}
#flex-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Heebo', sans-serif;


}


.contact-section {
    text-align: center;
    width: 100%;
    min-height: 77vh;     /* Replaced from height to min-height */
    background: linear-gradient( rgba(0,0,0,0.35), rgba(0,0,0,0.35)), url(img/colo.png);
    /* background-size: center; */
    background-position: center;
    color: white;
    margin-top: 2.5rem;
    padding: 4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.contact-section__text {
    font-weight: 700;
    font-size: x-large;
}

label {
    display: none;
} 

.contact input,
.contact textarea {
    margin: .5rem;
    font-weight: 1000;

} 
.contact textarea {
    margin-right: 1.25rem;
}
.contact-section__btn {
    padding: 12px 26px;
    border-radius: 7px;
    background: rgb(201, 83, 5);
    border: none;
    color: white;
    font-size: 1.05rem;
}
.contact-section__btn:hover,
.contact-section__btn:focus {
    background-color: white;
    color: rgb(201, 83, 5);
    cursor: pointer;

}

input[type="text"], [type="email"], textarea {
    background-color: rgb(247, 204, 175);
    border-color: rgb(201, 83, 5);
    width: 400px;
    height: 35px;
    margin-right: 1.45rem;
}

.contact__txtarea label,
.textarea {
    width: 400px;
    height: 200px;
    vertical-align: top;
}
.email-form {
    margin-right: .80rem;
}
.addresses {
    /* background-color: rgb(99, 99, 99); */
    background-color:rgb(201, 83, 5);
    color: white;
    /* margin-top: 2rem; */
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    text-align: center;
    /* padding-inline-start: 0; */
    justify-content: space-evenly;
}

.addresses__info1 {
    flex-direction: column;

}
.addresses__info2 {
    flex-direction: column;
}
.main_footer {

  /* background-color:rgb(99, 99, 99); */
  background-color:rgb(201, 83, 5);
    /*margin-top: 3.5rem;*/
    flex-direction: column;
}

.footer_links  { /*li*/
  margin: 0;
}

.footer_lists  { /*ul*/
  list-style: none;
  margin: 0;
    text-align: center;
    padding-inline-start: 0;
}

.footer_links a { /*li a*/
  color:white;
  text-decoration: none;
  font-size: 1.1rem;

}
.footer_links :hover {
  text-decoration-line: underline;
}
    <!DOCTYPE html>

<html>
  <head>
      <title>Contact | Feel free to email or call Us!</title>
      <link rel="stylesheet" type="text/css" href="contact.css">
      <link rel="stylesheet" type="text/css" href="contact_nav_ft.css">
      <link href="img/colo.icon .png" rel="shortcut icon" type="image/x-icon" />
      <link href="https://fonts.googleapis.com/css2?family=Heebo&display=swap" rel="stylesheet">


  </head>

  <body>
    <nav>
        <ul class="nav_list">
            <li ></li>
            <li class="nav_lists" style="float:right;"><a href="Colombia.html">Our Purpose</a></li>
            <li class="nav_lists"><a href="Colombian-cities.html">Cities</a></li>
            <li class="nav_lists"><a href="contact.html">Contact</a></li>
            <li class="nav_lists"><a href="services.html">Our Services</a></li>
        </ul>
    </nav>

  <main id="flex-container">
    <section class="contact-section">
      <div class="contact-section__text">
        <p>
            Shoot us an email or Give us a call!<br>
            We are always happy to answer any questions you may have!<br>
        </p>
      </div>
        <form action="" method="POST" class="contact">
            <div>
                <label for="name">Your Name</label>
                <input id="name" type="text"  placeholder="Your name" required>
            </div>
            <div class="email-form">
                <label for="email">Your Email</label>
                <input id="email" type="email" placeholder="Your email" required>
            </div>
            <div class="contact__txtarea">
                <label for="text">Message</label>  
                <textarea  class="textarea" id="text" maxlength="500" placeholder="Your message here..." required></textarea>
            </div>
            <div>
                <input class="contact-section__btn" type="submit" value="Send Message" required> 
            </div>
        </form>
    </section>


    

<!--</section>-->
  </main>
  
  <footer class="main_footer">
  
    <div class="addresses">
        <div class="addresses__info1">
            <p>Finds us on:</p>
            <img src="img/you.svg" alt="Youtube">
            <img src="img/insta.svg" alt="Instagram">
            <img src="img/face.svg" alt="Facebook">

            <p>Email us at: <a href="mailto:questions@countryofcol.com">questions@countryofcol.com</a><br>
            Call us at: <a href="tel:+57 118-647-0023">+57 118-647-0023</a><br></p>
        </div>


        <div class="addresses__info2">
            <p>Calle Maria 63 Oficina 702<br>
            Medellin 4665684<br>
            Colombia<br></p>

            <p>Tuesday-Saturday<br>
            9AM - 6PM COT<br></p>

        </div>

    </div>
    <ul class="footer_lists">
        <li class="footer_links"><a href="terms.html">Terms</a></li>
        <li class="footer_links"><a href="privacy.html">Privacy Policy</a></li>
    </ul>
  </footer> 
</body>
</html>

    【讨论】：

    • 对，我试图从其他页面回收页脚代码，却没有意识到我会使用更多。这个最小高度有什么作用？
    • min-height 实际上是在固定容器的最小高度。但是这个容器将伸展以包含其所有内容。所以所有其他元素都将被下推。因为也许您没有看到，但在您验证的答案中，在其演示中，表单位于下面的部分（页脚）后面......所以在根本不工作的移动设备上......
    猜你喜欢
    • 2011-09-24
    • 1970-01-01
    • 2012-03-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-04-09
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode