如何使用 VH 布局保留部分？

Question

我正在尝试实现以下布局（图 1），想法是它应该根据屏幕（台式机和笔记本电脑屏幕）保持相同的结构和比例

但是，在我当前的代码中，它在桌面上看起来不错，但我不知道在不更改布局的情况下将元素和文本的命题保留在笔记本电脑屏幕中。基本上元素（文本）的内容超出了框（溢出）。我正在使用 100VH、flexboxes 和 clac () 但我没有运气 - 我应该改用 Grid 吗？

有谁知道我如何设计这种布局并根据用户屏幕（笔记本电脑 - 台式机）保持内容（框和文本）可扩展

//Basic styling
html {
  font-family: $font-main;
  font-size: $fs-base;
  line-height: $lh-normal;
  font-weight: $fw-normal;
}

body {
  font-family: $font-main;
  line-height: $lh-normal;
  font-weight: $fw-normal;
  width: 100%;
  min-width: $vp-min-width;
  min-height: 100%;
  color: $c-black;
  background-color: $c-white;
}

html,
body,
div,
header,
footer,
section {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;
}

.footer-container {
  display: flex;
  flex-flow: row wrap;
  height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, #004c54 0%, #0097a7 100%);
  padding: calc(4rem + 0.5vw) calc(4rem + 0.5vw);
  color: #fff;
  overflow: hidden;
}

.f-find-us {
  width: 295px;
  & p {
    font-size: 1.250em;
    margin-bottom: 1.2em
  }
}

.f-find-us-map {
  background: green;
}

//Headings
h1 {
  font-size: $fs-xlarge;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h2 {
  font-size: $fs-large;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h3 {
  font-size: $fs-large;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0;
}

h4 {
  font-size: $fs-normal;
  font-weight: $fw-semibold;
  line-height: initial;
  margin: 0;
}

h5 {
  font-size: $fs-xlarge;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0 0 1.2em 0;
}

h6 {
  font-size: $fs-medium;
  font-weight: $fw-semibold;
  margin: 0;
  line-height: initial;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

<div class="footer-wrapper">
  <div class="footer-container">

    <div class="row">
      <div class="col f-find-us">

        <h5>How to find us</h5>

        <h6>UK</h6>

        <p>Content HERE</p>

        <h6>Singapore</h6>

        <p>Content HERE</p>

        <h6>Canada</h6>

        <p>Content HERE</p>

      </div>
      <div style="flex: 1" class="col f-find-us-map">map</div>
    </div>

    <div class="row">
      <div style="background: pink; flex: 2;" class="col">
        <h5>ABOUT Content HERE</h5>

        <p>Content HERE are a software solutions provider, using a combination of business consultancy and user led design to deliver scalable transformative tech solutions.</p>

        <a href="/" style="text-transform: uppercase;">Get it touch with us</a>
      </div>
      <div style="background: yellow; flex: 1;" class="col">col2</div>
      <div style="background: pink; flex: 1;" class="col">col3</div>
      <div style="background: yellow; flex: 1;" class="col">col4</div>
    </div>

  </div>
</div>

Answer 1

你想要这样的东西吗？

//Basic styling
html {
  font-family: $font-main;
  font-size: $fs-base;
  line-height: $lh-normal;
  font-weight: $fw-normal;
}

body {
  font-family: $font-main;
  line-height: $lh-normal;
  font-weight: $fw-normal;
  width: 100%;
  min-width: $vp-min-width;
  min-height: 100%;
  color: $c-black;
  background-color: $c-white;
}

html,
body,
div,
header,
footer,
section {
  box-sizing: border-box;
}

.row {
  display: flex;
  width: 100%;
}
.w1{
  width: 20%;
}
.w2{
  width: 40%;
}
.w4{
  width: 80%;
}
.footer-container {
  height: 100vh;
  width: 100%;
  background: linear-gradient(45deg, #004c54 0%, #0097a7 100%);
  padding: calc(4rem + 0.5vw) calc(4rem + 0.5vw);
  color: #fff;
  overflow: hidden;
}

.f-find-us  p {
    font-size: 1.250em;
    margin-bottom: 1.2em;
}

.f-find-us-map {
  background: green;
}

//Headings
h1 {
  font-size: $fs-xlarge;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h2 {
  font-size: $fs-large;
  font-weight: $fw-bold;
  margin: 0;
  line-height: initial;
}

h3 {
  font-size: $fs-large;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0;
}

h4 {
  font-size: $fs-normal;
  font-weight: $fw-semibold;
  line-height: initial;
  margin: 0;
}

h5 {
  font-size: $fs-xlarge;
  font-weight: $fw-semibold;
  text-transform: uppercase;
  color: $c-white;
  line-height: initial;
  margin: 0 0 1.2em 0;
}

h6 {
  font-size: $fs-medium;
  font-weight: $fw-semibold;
  margin: 0;
  line-height: initial;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

<div class="footer-wrapper">
  <div class="footer-container">

    <div class="row">
      <div class="col w1 f-find-us">

        <h5>How to find us</h5>

        <h6>UK</h6>

        <p>Content HERE</p>

        <h6>Singapore</h6>

        <p>Content HERE</p>

        <h6>Canada</h6>

        <p>Content HERE</p>

      </div>
      <div class="col w4 f-find-us-map">map</div>
    </div>

    <div class="row">
      <div style="background: pink;" class="col w2">
        <h5>ABOUT Content HERE</h5>

        <p>Content HERE are a software solutions provider, using a combination of business consultancy and user led design to deliver scalable transformative tech solutions.</p>

        <a href="/" style="text-transform: uppercase;">Get it touch with us</a>
      </div>
      <div style="background: yellow" class="col w1">col2</div>
      <div style="background: pink; " class="col w1">col3</div>
      <div style="background: yellow; " class="col w1">col4</div>
    </div>

  </div>
</div>