CSS 问题：如何对齐<div>元素（<div> 、页眉、页脚和正文）垂直与响应式网页设计？

Question

I am trying to align the header, body, footer, and div's vertically in one column such that the web design is responsive (looks good on different screen sizes): ConfluenceInfinite.org or see dev subdomain below.我试图将页眉、正文、页脚和 div 垂直对齐在一列中，以便网页设计具有响应性（在不同的屏幕尺寸上看起来不错）：ConfluenceInfinite.org 或查看下面的开发子域。

For people who are new to html and css (like me) this is a pure css / html implementation/markup including the menu.对于不html和css （像我一样），这是一个纯css / html实现/标记，包括菜单。

You can go to my development subdomain to see the issue first-hand: my development subdomain: dev.confluenceinfinite.org您可以到我的开发子域直接查看问题：我的开发子域：dev.confluenceinfinite.org

I have done LOT of research on this.我对此做了很多研究。 Here is some of that research:以下是其中的一些研究：

I don't believe this question/answer applies to my issue because my issue is vertical alignment (correct me if I am wrong).我不相信这个问题/答案适用于我的问题，因为我的问题是垂直对齐（如果我错了，请纠正我）。 It uses fixed px values, which won't work for cell phones, and I tried the display: inline-block , but it didn't work.它使用固定的px值，这不适用于手机，我尝试了display: inline-block ，但没有用。 Here is the link to the SO question: click here这是 SO 问题的链接：单击此处

This question/answer (which got via searching OS tag vertical-alignment) also has a fixed width that I do not want to do because I want the <div> s to be fully dynamic for all screen sizes: click here这个问题/答案（通过搜索 OS 标签垂直对齐获得）也有一个我不想做的固定宽度，因为我希望<div>对所有屏幕尺寸都是完全动态的：单击此处

I don't think this helps either because it aligns elements within a container, but I want the containers/div's aligned.我认为这也无济于事，因为它对齐容器内的元素，但我希望容器/div 对齐。 Am I missing something?: click here我错过了什么吗？：点击这里

This solution has the correct title/heading, but aligns things on the "right" vertically, which don't seem applicable to my issue: Click here此解决方案具有正确的标题/标题，但垂直对齐“右侧”的内容，这似乎不适用于我的问题：单击此处

I used to use a website or program that allowed a developer to test/visualize website design on multiple screen sizes.我曾经使用允许开发人员在多种屏幕尺寸上测试/可视化网站设计的网站或程序。 I can no longer find that site.我再也找不到那个网站了。 If you know the location of that site, please comment or put it in your answer.如果您知道该站点的位置，请发表评论或将其放入您的答案中。 Thanks!谢谢！

Here is my index/home page html markup:这是我的索引/主页html标记：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="generator"
    content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <link rel="icon" type="/images/png" href="/images/CII - favicon for website - 2020-09-17 0435.png" />
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="/StylePage.css" />
    <link rel="stylesheet" href="/StyleMenu.css" />
    <title>CII - Optimizing change for the benefit of all.</title>
  </head>
  <body>
    <header>
      <!-- start ============================================================================ menu (goes in header) ============================== start -->
      <div class="menu-wrap">
        <input type="checkbox" class="toggler" />
        <div class="hamburger">
          <div class="ClassForTidy"></div>
        </div>
        <div class="menu">
          <div>
            <div>
              <ul>
                <li>
                  <a href="Index.html">Home</a>
                </li>
                <li>
                  <a href="Team.html">Team</a>
                </li>
                <li>
                  <a href="AboutUs.html">About Us</a>
                </li>
                <li>
                  <a href="Definitions.html">Definitions</a>
                </li>
                <li>
                  <a href="HaveDoubts.html">Have Doubts?</a>
                </li>
                <li>
                  <a href="ContactUs.html">Contact Us</a>
                </li>
                <li>
                  <a href="DonateToday.html">Donate Today</a>
                </li>
                <li>
                  <a href="GetInvolved.html">Get Involved</a>
                </li>
                <li>
                  <a href="TheMovement.html">The Movement</a>
                </li>
                <li>
                  <a href="c11.html">c11</a>
                </li>
                <li>
                  <a href="TheCeosStory.html">The CEO's Story</a>
                </li>
                <li>
                  <a href="News.html">News</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- end ============================================================================ menu (goes in header) ============================== end -->
      <!-- start ============================================================================ header text ============================== start -->
      <p id="HeaderText">-------------------- SITE UNDER CONSTRUCTION -------------------- this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</p>
      <!-- end ============================================================================ header text ============================== end -->
    </header>
    <div class="site-wrap">
      <!-- start ============================================================================ logo region ============================== start -->
      <figure class="fig_logo_reg">
        <img src="/images/CII_Logo.PNG" class="img_logo_reg" />
      </figure>
      <!-- end ============================================================================ logo region ============================== end -->
      <!-- start ============================================================================ start page content ============================== start -->
        <!-- start ============================================================================ paste content below ============================== start -->
        <div class="container showcase-inner">
          <br />
          <br />
          <h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">Why doesn't the system favor "the good guy"? Let's rig the system in your
          favor.</h1>
          <h1 style="font-size:30px; color: black; padding: 10px 0 0 0; margin: 30px 0; line-height: 30px;">We know how to fund the "unicorn" and tame the "machine" whilst compelling
          people to change how they think, work, and have fun so it benefits good people, without breaking any laws. Truly.</h1>
          <br />
          <p>The world is focused on money, getting people’s attention, and offering goods and service at an equilibrium price
          where both the lowest financial cost and highest financial gain are at. CII is focused on destroying this “machine”
          and system of values in a legal, ethical, and morally sound way. CII has created technology that will facilitate,
          perpetuate, and maintain the new system by optimizing change for the benefit of all that will connect good people,
          produce optimal “humanitarian value” output, and simultaneously destroy the old system over time. CII will facilitate
          this with the help of good people in a way that will protect individuals and their livelihood achieving a better system
          for society.</p>
          <a href="AboutUs.html" class="btn">Read More this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</a>
        </div>
        <!-- end ============================================================================  paste content above  ============================== end -->
      </div>
    <!-- start =============================================================== footer ============================================= end -->
    <footer>
    <div class="navLeftFooter nav-globe" id="navFooter">
      <a href="#top" id="navBackToTop">
        <div class="navFooterBackToTop">
          <span class="navFooterBackToTopText">Go Back to Top of Page - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</span>
        </div>
      </a>
      <div class="navFooterVerticalColumn navAccessibility" role="presentation">
        <div class="navFooterVerticalRow navAccessibility" style="display: table-row;">
          <div class="navFooterLinkCol navAccessibility">
            <div class="navFooterColHead">Get to Know Us</div>
            <ul>
              <li class="nav_first">
                <a href="GetInvolved.html" class="nav_a">Careers &amp; Volunteer</a>
              </li>
              <li>
                <a href="TheCeosStory.html" class="nav_a">Blog</a>
              </li>
              <li>
                <a href="AboutUs.html" class="nav_a">About CII</a>
              </li>
              <li>
                <a href="AboutUs.html#TargetSusCsr" class="nav_a">Sustainability</a>
              </li>
              <li>
                <a href="News.html" class="nav_a">News &amp; Press Center</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Donor Relations</a>
              </li>
            </ul>
          </div>
          <div class="navFooterColSpacerInner navAccessibility"></div>
          <div class="navFooterLinkCol navAccessibility">
            <div class="navFooterColHead">Get Involved with CII's Platform</div>
            <ul>
              <li class="nav_first">
                <a href="ContactUs.html" class="nav_a">Become an Affiliate</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Become a Strategic Partner</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Offer Your Product or Service/"Advertise"</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit an Ideology for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit an Idea for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Core Value for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Concept for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Core Change for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit Anything Else</a>
              </li>
            </ul>
          </div>
          <div class="navFooterColSpacerInner navAccessibility"></div>
          <div class="navFooterLinkCol navAccessibility">
            <div class="navFooterColHead">Connect with People</div>
            <ul>
              <li class="nav_first">
                <a href="TheMovement.html" class="nav_a">The Movement</a>
              </li>
              <li>
                <a href="c11.html" class="nav_a">c11</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">CII</a>
              </li>
            </ul>
          </div>
          <div class="navFooterColSpacerInner navAccessibility"></div>
          <div class="navFooterLinkCol navAccessibility">
            <div class="navFooterColHead">Help People</div>
            <ul>
              <li class="nav_first">
                <a href="c11.html" class="nav_a">c11 - this is a test to see if the right side of this text is dropping off the page or not it has to be very long to test the issue</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report Something</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Pay Something Forward</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a "Do-gooder"</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Organization</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Business</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output nonprofit</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Government/Country</a>
              </li>
              <li class="nav_last">
                <a href="ContactUs.html" class="nav_a">Help</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <div class="nav-footer-line"></div>
      <div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
        <div class="navFooterLine navFooterLogoLine">
          <figure id="FigLogoTiny">
            <img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
          </figure>
        </div>
        <div class="navFooterLine"></div>
      </div>
    </div>
    </footer>
    <!-- end ============================================================================ footer ============================== end -->
  </body>
</html>

Here is the style.css :这是style.css ：

/* imports see https://medium.com/@elad/normalize-css-or-css-reset-9d75175c5d1e#_=_    */
@import "resets/normalize.css";
@import "resets/reset.local.css";
@import "resets/typography.css";

/* CORE STYLES */
:root {
  --primary-color: rgba(255, 255, 255, 0.75);
  --overlay-color: rgba(24, 39, 51 , 0.85);
  --menu-speed: 0.75s;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

body {
  font-family: 'Roboto', sans-serif;
  line-height: 1.4;
}

header {

    transition-timing-function: cubic-bezier(0.2, 0, 0.38, 0.9);
    background: var(--cds-ui-background, #fff);
    border: none;
    max-width: 100vw; /*99rem;*/
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 1px;
    position: relative;
    z-index: 5999;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    display: flex;
    align-items: center;
    height: 3rem;
    background-color: #161616;
    border-bottom: 1px solid #393939;
    color: white;
    text-align: center;
    display: block;
}

#HeaderText {
        margin-bottom: auto;
        margin-top: auto;
        margin-left: 0;
        margin-right: 0;
        color: white;
        padding-top: 12px;
}

#SharePopup {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  width: 60px;
  /* height: 60px; */
  padding: 1rem;
  /* background: var(--primary-color); */
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: inherit;
  height: 3rem;
  color: white;
  text-align: right;
  cursor: pointer;
  background: #06D85F;
  -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    
}
#SharePopup:hover {
  background: white;
  color: black;
}

h1 {
        line-height: 35px;
        font-size: 23px;
        padding-bottom: 0;
        padding-top: 15px;
        text-align: center;
}
h2 {
    line-height: 35px;
    font-size: 23px;
    padding-bottom: 0;
    padding-top: 0px;
    text-align: left;
}
.container {
  max-width: 100vw;
  margin: auto;
  overflow: hidden;
  
  /*removed on 2020-09-28 to get text to spread accross screen more and not be so scrunched/narrow in the div/tall etc*/
  /* padding: 0 3rem; */
}

.showcase {
  background: var(--primary-color);
  color: #fff;
  height: 100vh;
  position: relative;
}

.showcase:before {
  content: '';
  /* background: url('https://images.pexels.com/photos/533923/pexels-photo-533923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260') no-repeat center center/cover;*/
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.showcase .showcase-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 80%;
}

.showcase h1 {
  font-size: 4rem;
  padding: 15px;
}

.showcase p {
  font-size: 1.3rem;
  color: black;
}

.site-wrap {
  min-width: 100vw;
  min-height: 100vh;
  /* background-color: #ffffff; /* white */ 
  /* position: relative; */
  top: 0;
  bottom: 100%;
  left: 0;
  z-index: 1;
  padding: 4em; /*spaces out content from hamburger*/
}

.site-wrap img {
    max-width: 100vw; /*60% */
    max-height: 45vh; /*60% */
    display: block;
  margin-left: auto;
  margin-right: auto;
}
.site-wrap p {
        padding: 5px;
}
.site-wrap figure {
    align-items: center;
}
.site-wrap ul
        , li {
    padding: 5px;
    margin-left: 5px; 
    padding-left: 15px;
}


.container.showcase-inner .btn {
  display: inline-block;
  border: none;
  background: white; /*var(--secondary-color);*/
  color: black;
  padding: 0.75rem 1.5rem;
  margin-top: 1rem;
  transition: opacity 1s ease-in-out;
  text-decoration: none;
   border:1px solid black;
   border-radius: 25px;
   
   /*fixmeben*/
    text-align: center;
   display: block;
   
}

.btn:hover {
  opacity: 0.7;
  background: gray;
}

/* footer stuff */

#navFooter.navLeftFooter .navFooterBackToTop .navFooterBackToTopText {
    color: white;
}
#navFooter .navFooterBackToTop span {
    display: block;
    text-align: center;
    color: #111;
    padding: 15px 0;
    line-height: 19px;
    font-size: 13px;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}

#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}
.a-ember body {
    font-family: Arial,sans-serif;
}
body {
    color: #0F1111;
}
body {
    font-size: 13px;
    line-height: 19px;
    font-family: Arial,sans-serif;
}
html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
}
#navFooter.navLeftFooter .navFooterBackToTop {
    margin-bottom: 40px;
    background-color: gray;
}
#navFooter .navFooterBackToTop {
    background-color: #f3f3f3;
    margin-bottom: 25px;
}
/* * { */
    /* -moz-box-sizing: border-box; */
    /* -webkit-box-sizing: border-box; */
    /* box-sizing: border-box; */
/* } */
user agent stylesheet
div {
    display: block;
}
#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
user agent stylesheet
a:-webkit-any-link {
    color: -webkit-link;
    cursor: pointer;
}

/* body { */
    /* color: #0F1111; */
/* } */
/* body { */
    /* font-size: 13px; */
    /* line-height: 19px; */
    /* font-family: Arial,sans-serif; */
/* } */
/* html { */
    /* font-size: 100%; */
    /* -webkit-text-size-adjust: 100%; */
/* } */
 /* start footer table 1 starting with Get to know us */

#navFooter .navAccessibility.navFooterVerticalColumn {
    display: table;
    margin: 0 auto;
}

#navFooter.navLeftFooter .navFooterVerticalColumn {
    /* changed 2020-09-28 18:10 */
    max-width: 100vw;
    background: rgb(105,105,105);
}
#navFooter .navAccessibility.navFooterVerticalRow {
    display: table-row;
}
#navFooter .navAccessibility.navFooterLinkCol {
    display: table-cell;
    padding: 0 10px;
}
#navFooter .navAccessibility.navFooterLinkCol {
    line-height: 120%;
}

.navFooterLinkCol {
    color: #333;
    vertical-align: top;
}

#navFooter.navLeftFooter .navFooterColHead {
    font-weight: 700;
}
.navFooterColHead {
    font-family: inherit;
    color: white;
    font-size: 16px;
    margin: 6px 0 14px 0;
    white-space: nowrap;
}
.navFooterLinkCol ul {
    padding: 0;
    margin: 0;
}
.a-ordered-list, .a-unordered-list, ol, ul {
    padding: 0;
}
.a-unordered-list, ul {
    margin: 0 0 0 18px;
    color: #111;
}
#navFooter.navLeftFooter .navFooterLinkCol ul li {
    margin: 0 0 10px;
}
.navFooterLinkCol ul li {
    list-style-type: none;
    white-space: nowrap;
    margin: 0 0 8px 0;
}

.a-ordered-list li, .a-unordered-list li, ol li, ul li {
    word-wrap: break-word;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 25px;
    padding: 0px;
}
.a-unordered-list li, ul li {
    list-style: disc;
}
li {
    display: list-item;
    text-align: -webkit-match-parent;
}

.a-unordered-list, ul {
    margin: 0 0 0 18px;
    color: #111;
}

#navFooter .navAccessibility.navFooterLinkCol {
    line-height: 120%;
}
.navFooterLinkCol {
    color: #333;
    vertical-align: top;
}
#navFooter.navLeftFooter a.nav_a:link, #navFooter.navLeftFooter a.nav_a:visited, #navFooter.navLeftFooter li.nav_a_carat span.nav_a_carat {
    color: #DDD;
}
#navFooter a:link, #navFooter a:visited {
    font-family: inherit;
    color: #004B91;
    text-decoration: none;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}

/* working on navFooterColSpacerInner */
#navFooter .navAccessibility.navFooterColSpacerInner, #navFooter .navAccessibility.navFooterLinkCol {
    display: table-cell;
    padding: 0 5px;
}
.navFooterVerticalColumn .navFooterColSpacerInner {
    width: 5%;
    padding: 0 15px;
}
#navFooter.navLeftFooter .nav-footer-line {
    border-top: 1px solid #3a4553;
    margin-top: 40px;
}
#navFooter.navLeftFooter div.navFooterLine {
/* working */   
    max-width: 25%;
}
#navFooter.navLeftFooter .navFooterLinkLine {
    margin: 10px auto;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
    text-align: center;
    max-width: 100vw;
    margin: 30px auto 15px;
}
div.navFooterLine {
    font-family: inherit;
    color: #767676;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
}
.navFooterLinkLine {
    margin: 0 8px 0 8px;
}
#navFooter a, #navFooter span {
    font-family: inherit;
    white-space: normal;
}
.navFooterPadItemLine a, .navFooterPadItemLine span {
    padding: 0 .6em;
}
.navFooterLinkLine span, .navFooterLinkLine ul {
    list-style-type: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}
#navFooter.navLeftFooter div.navFooterLine {
    font-size: 12px;
}
#navFooter.navLeftFooter .navFooterLogoLine, #navFooter.navLeftFooter .navFooterPadItemLine {
    text-align: center;
    max-width: 100vw;
    margin: 30px auto 15px;
}
div.navFooterLogoLine {
    margin: 30px 8px 4px 8px;
    font-size: 1px;
    line-height: 0;
}
div.navFooterLine {
    font-family: inherit;
    color: #767676;
    font-size: 11px;
    text-align: center;
    line-height: 18px;
    white-space: nowrap;
}
a, a:active, a:link, a:visited {
    text-decoration: none;
    color: #0066c0;
}
#navFooter .nav-logo-base {
    background-position: -10px -90px;
    width: 76px;
    height: 23px;
    margin: 0 auto;
    background: url('/images/CII_Logo.png');
}
.nav-globe .nav-globe, .nav-globe .nav-icon {
    
    /* background-color: black;  */
}

#FigLogoTiny {
    /*working*/
    /* max-width: 5%; */
    max-height: 5%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    
    /* position: absolute; */
    /* bottom: 100%; */
    /* right: 100%; */
    
}

I am happy to include the import s if that is helpful.如果有帮助，我很高兴包含import 。 I assume you can see that by inspecting the website directly, but I am happy to edit this question to include the import css .我假设您可以通过直接检查网站来看到这一点，但我很高兴编辑此问题以包含import css 。 Trying to keep the question as organized and short as possible.试图使问题尽可能有条理和简短。

I will be watching this question to see if anyone needs anything further to answer it or provide any assistance at all.我将关注这个问题，看看是否有人需要进一步回答或提供任何帮助。 I will edit the question as soon as possible if necessary.如有必要，我会尽快编辑问题。 Thanks!谢谢！

PS - I'm trying to make the solution/my website work across all browsers and all screen sizes without any scripts, if that is possible. PS - 如果可能的话，我正在尝试使解决方案/我的网站在所有浏览器和所有屏幕尺寸上都能正常工作，而无需任何脚本。

PSS - On a computer you have to size the window down to see the issue...that's what I did in the computer screenshot above to illustrate the issue. PSS - 在计算机上，您必须缩小窗口大小才能看到问题……这就是我在上面的计算机屏幕截图中所做的说明问题。

EDIT-1: I should also state that the preferable responsiveness/dynamic/movement/etc. EDIT-1：我还应该说明更好的响应性/动态/运动/等。 for the footer is to have a div column slide down below the other div columns if it doesn't fully fit on the page/isn't all visible to the user.对于页脚，如果div列不完全适合页面/用户不可见，则将div列向下滑动到其他div列的下方。

Answer 1

I really appreciate the focus and politeness of your question.我真的很欣赏你的问题的重点和礼貌。 I've barely seen something like that.我几乎没见过这样的东西。 As for the issue, I split it in two parts, one for the image and one for the footer.至于这个问题，我把它分成两部分，一个是图片，一个是页脚。 Responsive Web Design is definitely what you're looking for.响应式网页设计绝对是您正在寻找的。 As for the image, replace至于图像，替换

.site-wrap img {
    max-width: 100vw;
    ...
}

with和

.site-wrap img {
    max-width: 100%;
    ...
}

As for the footer, things get a little bit more complicated, so I show a simple example of what you can do:至于页脚，事情变得有点复杂，所以我展示了一个简单的例子，你可以做什么：

 * { margin: 0; padding: 0; } p { flex: 1; } #one { background: red; } #two { background: pink; } #three { background: green; } div { display: flex; flex-direction: row; } @media (min-width: 500px) { div { flex-direction: column; } }

 <div> <p id="one"> First </p> <p id="two"> Second </p> <p id="three"> Third </p> </div>

If you open this page full size and resize the viewport of the browser, you can see how the elements are placed vertically to make the most out of the available space.如果您以全尺寸打开此页面并调整浏览器视口的大小，您可以看到如何垂直放置元素以充分利用可用空间。

Answer 2

Here is the simplest example I found to solve the footer issue.这是我发现的解决页脚问题的最简单示例。 This allows the footer divs to come down and create a new row as the screen is resized.这允许页脚 div 在调整屏幕大小时下降并创建一个新行。 Its a bit over simplified, but easy to understand.它有点过于简化，但很容易理解。 Here is the code:这是代码：

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: Blue;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 100px;
  margin: 10px;
  text-align: center;
  line-height: 75px;
  font-size: 30px;
}
</style>
</head>
<body>
<h1>Flexible Boxes</h1>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>  
  <div>4</div>
  <div>5</div>
  <div>6</div>  
  <div>7</div>
  <div>8</div>
</div>

<p>text - XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.</p>

</body>
</html>

...it is a slight modification of this example: Click here ...这是对这个例子的轻微修改：点击这里

Rene van der Lende's comment contains the code I ended up using to solve the same issue as the code above (the footer) but with a more professional look...sort of. Rene van der Lende 的评论包含我最终用来解决与上面的代码（页脚）相同的问题的代码，但具有更专业的外观......有点。 It has a bit more eye candy/more professional look, but is much more complex to understand for a beginner: Click Here它有一些更吸引眼球/更专业的外观，但对于初学者来说理解起来要复杂得多：单击此处

Here is the code from the link above, but you can see it in action in the link above:这是上面链接中的代码，但您可以在上面的链接中看到它的运行情况：

<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1">

<title>Example for MadBoy</title>

<style id="ers-globals-default">
/**************************/
/* preferred global rules */
/**************************/
html,body               { box-sizing: border-box; width: 100%; max-width: 100%; height: 100% }
*::before,*::after, *   { box-sizing: inherit }
body                    { margin: 0 }

/* responsive base font size using y = mx + b */
html   { font-size: calc(0.625vmin + 0.75rem) } /* (320,14)(1280,20) */

/***************************************/
/* responsive FLEXBOX bands and blocks */
/***************************************/
/*
    For use as easy 'landingpage' content containers
    [band]  - horizontal content like a strip
    [block] - vertical content like a list

    - Can both be used interchangeably and nested
      (band of blocks, block of bands, band of blocks holding bands of...)
    - Invert orientation with 'rows'/'cols' parameter ( *= means: contains )
*/
[band],[block]          { display: flex; position: relative; overflow: hidden }
[band],[block]          { justify-content: center; align-content: center }

[band],[band*="cols"]   { flex-flow: row wrap    }  /* a row of columns, default */
       [band*="rows"]   { flex-flow: column wrap }  /* a column of rows */

[block],[block*="rows"] { flex-flow: column wrap }  /* inverse default of [band] */
        [block*="cols"] { flex-flow: row wrap    }

.padded,
[padded="1"],
[padded="0"] [band*="padded"],
[padded="0"] [block*="padded"] {
/*
    responsive page padding using y = mx + b
    and responsive band/block padding (same as responsive page padding, but at band/block level)
    p1(320,32) p2(1920, 72) => 0.025x + 24
    p3(320, 8) p4(1920,320) => 0.195x - 54.4 

    'band/block padding' is only active when 'page padding' is off 
*/
    padding: calc( 2.5vh + 24px) calc(19.5vw - 54.4px);
}
</style>
<style id="stl-cards-default">
/****************/
/* FLEXBOX Card */
/****************/
/* Everything card related is FBL */
[band*="cards"]>*,
[card],[card]>* { display: flex; flex-wrap: wrap }

/* generic 'band' holding 1:N cards */
[band*="cards"]>* {
    flex-basis: auto; /* Workaround, see comment below */   
    /* default width (4 to 6 vp columns, depends on [band] L/R padding) */
    width: calc(1.9375vw + 277.8px); /* (320,284)(1920,315) */

/*
    The preferred rule is flex-basis: calc(1.9375vw + 277.8px), without 'width' defined,
    but I use border-box box model throughout this demo (and anywhere else b.t.w.), so: 
    
    from MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis

    "When a non-auto flex-basis is specified, Internet Explorer 10 and 11 
     always use a content-box box model to calculate the size of a flex item,
     even if 'box-sizing: border-box' is applied to the element. See Flexbug #7 for more info."

    Flexbug #7, https://github.com/philipwalton/flexbugs#7-flex-basis-doesnt-account-for-box-sizingborder-box
    See Flexbug #8 too, why 'flex-grow: 1' has to used for IE11 instead of 'flex: 1'
*/
    flex-grow : 1;                  /* set to 0 for non-stretching cards */
/*    align-self: flex-start;         /* 'stretch' is preferred as 'flex-start' yields jagged heights */
}
/* TODO: maybe introduce  W/H dependency with MQ 'orientation' */

[card] {
    flex-direction: column;         /* VERTICAL container of header,content,footer */
    justify-content: space-between; /* moves header/footer to top/bottom of card */
    width: 100%; height: 100%;      /* for IE11 */
    flex-wrap: nowrap;
}

[card]>* { width: 100%; max-width: 100% } /* All card main rows: fill-width */

[card]>item {
    flex-direction: column;         /* COLUMN of 1:N rows */
    flex-grow: 1;                   /* card content, fill max available space */
    overflow: auto;                 /* scroll content in case card max-height set */

}
</style>
<style id="stl-card-demo">
/*******************************************/
/* [OPTIONAL] Card eye-candy and animation */
/*******************************************/
[band*="header"],
[band*="cards"] { background-color: rgba( 75, 84,104,.6);color: rgba(255,255,255,.8) }

[band*="cards"]>* { /* 'height' must have VW too, otherwise ratios will be incorrect */
/*    height    : calc((1.9375vw + 277.8px) * 1.77778);   /* Fixed W/H ratio 16:9 */
/*    max-height: calc((1.9375vw + 277.8px) * 1.77778);
    /* Adjust 'max-height' to choosen ratio or 0 in case of 'auto' (or remove) */

    cursor: pointer; /* It's animated, ok? So, no...clicker-de-click */
    -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none
}

[card]>header { justify-content: center   }
[card]>footer { justify-content: flex-end }

/*
    minimal padding around cards, but only if not already padded
    (nasty little trick with selector preference => [padded] will not work here
    because of same preference as [band])
*/
[band*="cards"]:not(.padded),
[band*="cards"]>*     { padding: calc(0.125vmin + 1.6px)} /* 2,4>1920 */
[card] > :not(.media) { padding: calc(0.5vmin + 14.4px) } /* 16,24>1920 */

[card] {
    background-color: rgba(255,255,255,1);  /* white */
    color: rgba( 89, 89, 89,1);             /* Davy's Grey */

    opacity: .95; /* for a subtle color diffence on :hover */

    /* Google Material Components Web default card elevation */
    box-shadow: 0px 2px 1px -1px rgba(0,0,0,.20),
                0px 1px 1px  0px rgba(0,0,0,.14),
                0px 1px 3px  0px rgba(0,0,0,.12); /* elevation 1dp */
}
[card]:hover {
    opacity: 1; /* ditto */

    box-shadow: 0px 3px  5px -1px rgba(0,0,0,.20),
                0px 5px  8px  0px rgba(0,0,0,.14),
                0px 1px 14px  0px rgba(0,0,0,.12); /* elevation 5dp */
}
[card]:active,
[card]:focus { transform: scale(0.995) }
</style>

<style id="ers-utility-default">
/**************************************************/
/* Utility rules, first so they can be overridden */
/**************************************************/
body  { cursor: default } /* Plain arrow for everything, but... */
input { cursor: auto    } /* ...use HTML default cursor on inputs, unless it is an: */

input[list="datalist"],input[type="button"],input[type="checkbox"],input[type="radio"],
input[type="color"],input[type="range"],input[type="reset"],input[type="file"],input[type="submit"],
label:not([for=""]),
a,button,select,keygen   { cursor: pointer } 
[contenteditable="true"] { cursor: text    }

/* Darker/more contrast text (put in <body>)
   => GPU intensive, set default to "0" if document scroll feels too sluggish. */
[cleartype="1"]         { text-shadow: .1px  .1px .2px hsla(0,0%,15%,.35),
                                      -.1px -.1px .2px hsla(0,0%,15%,.25) }
h1,h2,h3,h4,h5,h6,b,
[cleartype="0"],strong  { text-shadow: none } /* exceptions, no need to go even 'bolder' */

/* prohibit user from selecting text (put in <body>) */
.noselect,[select="0"],[noselect] { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none }
.select  ,[select="1"],[select]   { -webkit-user-select: text; -moz-user-select: text; -ms-user-select: text; user-select: text }
/* enable user to select text (put in specific elements) */

[push*="R"] { margin-left  : auto } /* push elements Right/Left/Top/Bottom */
[push*="L"] { margin-right : auto }
[push*="T"] { margin-top   : auto }
[push*="B"] { margin-bottom: auto }

[align*="C"] { text-align: center  } /* text alignment */
[align*="J"] { text-align: justify }
[align*="L"] { text-align: left    }
[align*="R"] { text-align: right   }

[hide], [data-hide="1"] {
    display: none; position: absolute; overflow: hidden; clip: rect(0 0 0 0);
    z-index: -999999; top: -999999px; margin: -1px; padding: 0; border: 0;
    height: 1px; width: 1px; min-height: 0; min-width: 0; max-height: 0; max-width: 0
}

::-moz-focus-inner { padding: 0; border: 0 } /* Firefox */
:focus { outline: dotted rgba(60,69,78,.5) 2px }
:focus { outline: -webkit-focus-ring-color auto 0; outline-width: 0 } /* for Edge 2020 */

/* show all elements with outlines (put in <body>) */
[outlines="1"] * { outline: 1px dashed }
</style>

</head>
<body padded="0" cleartype="0" outlines="0">
<div block>
    <header band="header">
        <h1>headline</h1>
    </header>
    <article band="list.cards" class="padded">
        <div>
            <div card>
               <img class="media" src="https://via.placeholder.com/320x240">
                <header><h3>interactive SVG</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=1">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=2">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=3">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=4">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=5">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=6">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=7">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=8">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
        <div>
            <div card>
               <img class="media" src="https://picsum.photos/320/240?random=9">
                <header><h3>subline</h3></header>
                <item>
                    <p>Lorem ipsum dolor sit amet, exerci dolorem est ad. Sumo rebum prompta vim ad. Legendos expetendis id sed. Ex ius quem accusamus, pri et
                        deleniti copiosae.</p>
                </item>
                <footer>footer</footer>
            </div>
        </div>
    </article>
</div>
</body>
</html>

...please post a simpler solution that can be applied directly to my original question/code (not a simplified one) and I'll mark your answer as correct. ...请发布一个更简单的解决方案，该解决方案可以直接应用于我的原始问题/代码（不是简化的问题），我会将您的答案标记为正确。 Until then I think this is the best answer.在那之前，我认为这是最好的答案。

Pine Code answered the logo/header/image issue: Pine Code 回答了徽标/标题/图像问题：

Replace:代替：

.site-wrap img {
    max-width: 100vw;
    ...
}

...with: ...和：

.site-wrap img {
    max-width: 100%;
    ...
}

Thanks Pine code.谢谢松代码。

EDIT 1: Here is the code I actually ended up using for the footer, which was the difficult part.编辑 1：这是我最终用于页脚的代码，这是困难的部分。 I ended up using the w3schools.com example mentioned above with some modifications, namely changing nowrap to wrap :我最终使用了上面提到的 w3schools.com 示例并进行了一些修改，即将nowrap更改为wrap ：

HTML: HTML：

<!-- start =============================================================== footer ============================================= end -->
    <footer>
      <div class="navLeftFooter nav-globe" id="navFooter">
        <a href="#top" id="navBackToTop">
          <div class="navFooterBackToTop">
            <span class="navFooterBackToTopText">Go Back to Top of Page</span>
          </div>
        </a>
        <div class="navFooterLine navFooterLinkLine navFooterPadItemLine">
          <div class="navFooterLine navFooterLogoLine">
            <figure id="FigLogoTiny">
              <img src="/images/CII%20-%20favicon%20for%20website%20-%202020-09-17%200435.png" />
            </figure>
          </div>
          <div class="navFooterLine"></div>
        </div>
        <!-- ========================================================================== footer lists - begin ===================================================================  -->
        <div class="flex-container">
          <div>
            <p class="navFooterColHead">Get Involved with CII's Platform</p>
            <ul>
              <li class="nav_first">
                <a href="TheMovement.html" class="nav_a">The Movement</a>
              </li>
              <li>
                <a href="c11.html" class="nav_a">c11</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">CII</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report Something</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Pay Something Forward</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a "Do-gooder"</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Organization</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Business</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output nonprofit</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Report a High Humanitarian Value Output Government/Country</a>
              </li>
              <li class="nav_last">
                <a href="ContactUs.html" class="nav_a">Help</a>
              </li>
            </ul>
          </div>
          <div>
            <p class="navFooterColHead">Get to Know Us</p>
            <ul>
              <li class="nav_first">
                <a href="ContactUs.html" class="nav_a">Become an Affiliate</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Become a Strategic Partner</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Offer Your Product or Service/"Advertise"</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit an Ideology for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit an Idea for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Core Value for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Concept for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit a Core Change for Consideration</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Submit Anything Else</a>
              </li>
              <li>
                <a href="Tactics.html" class="nav_a">Tactical Strategy</a>
              </li>
            </ul>
          </div>
          <div>
            <p class="navFooterColHead">Help Others</p>
            <ul>
              <li class="nav_first">
                <a href="GetInvolved.html" class="nav_a">Careers &amp; Volunteering</a>
              </li>
              <li>
                <a href="TheCeosStory.html" class="nav_a">Blog</a>
              </li>
              <li>
                <a href="AboutUs.html" class="nav_a">About CII</a>
              </li>
              <li>
                <a href="AboutUs.html#TargetSusCsr" class="nav_a">Sustainability</a>
              </li>
              <li>
                <a href="News.html" class="nav_a">News &amp; Press Center</a>
              </li>
              <li>
                <a href="ContactUs.html" class="nav_a">Donor Relations</a>
              </li>
            </ul>
          </div>
          <!-- <div>4</div> -->
          <!-- <div>5</div> -->
          <!-- <div>6</div> -->
          <!-- <div>7</div> -->
          <!-- <div>8</div> -->
        </div>
        <div class="nav-footer-line"></div>
        <p style="text-align: center; color: white; background-color: black;">© 2020, Confluence Infinite International NPO or its
        affiliates</p>
      </div>
    </footer>

CSS: CSS：

(My css is so overly complex right now I hit the SO character limit, so I only included the most critical part. For full css chat me or go to: confluenceinfinite.org and do an right-click > inspect.) （我的 css 现在太复杂了，我达到了 SO 字符限制，所以我只包含了最关键的部分。对于完整的 css，请与我聊天或访问：confluenceinfinite.org 并右键单击 > 检查。）

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: Gray;
}

.flex-container > div {
  background-color: #f1f1f1;
  width: 427px;
  margin: 11px;
  text-align: center;
  line-height: 1.75rem;
  font-size: 1rem;
  overflow-wrap: break-word;
  word-wrap: break-word;

 /* float: left; */
}

.flex-container > ul {
    list-style-type: none;
}

.flex-container > div > a:hover {
        text-decoration: underline;
        
}

CSS 问题：如何对齐<div>元素（<div> 、页眉、页脚和正文）垂直与响应式网页设计？

问题描述

2 个解决方案

解决方案1
1 2020-10-01 15:28:32

解决方案2
0 已采纳 2020-10-02 20:22:52

CSS 问题：如何对齐<div>元素（<div> 、页眉、页脚和正文）垂直与响应式网页设计？

问题描述

2 个解决方案

解决方案1 1 2020-10-01 15:28:32

解决方案2 0 已采纳 2020-10-02 20:22:52

解决方案1
1 2020-10-01 15:28:32

解决方案2
0 已采纳 2020-10-02 20:22:52