I'm trying to make a footer with a fixed size, but there's a problem-CodePudding

I'm producing a responsive website (Vue.js). Among them, a footer container is being made, and there is no problem with the entire screen, but if the resolution of the screen is lowered, the footer container becomes smaller than the size of the web screen.

As shown in the image below, it is output well without any problems when it is on the full screen, but if the resolution of the screen is lower than 1100, there is a problem that the size of the footer gradually decreases.

This is my html/css code of footer.

html

  <footer >
    <div >
      <div >
        <div >
          <span>자주 묻는 질문</span>
          <span>문의하기</span>
          <span>블로그</span>
          <span>채용</span>
          <span>파트너 모집</span>
        </div>
        <div >
          <!-- Icon -->
          <svg
          </svg>
        </div>
      </div>
      <!-- 사업자등록번호 -->
      <div >
        <h6>주식회사 XXXX</h6>
        <p>대표 XX | 사업자등록번호 123-45-67890</p>
        <p>
          XXX XXXX XXXXX | 1544-1544 | 통신판매업신고
          <a href="#">2019-서울종로-0920</a>
        </p>
        <span>운영정책</span>
        <span>개인정보처리방침</span>
        <span>이용약관</span>
        <span>공지사항</span>
      </div>
    </div>
  </footer>

css

/* main body content  */
#main-wrapper {
  width: 1100px;
  /* body center */
  margin: 0 auto;
}

/* footer style */
.footer {
  width: 100vw;
  /* margin-left: calc(-50vw   50%); */
  height: 300px;
  background-color: #f7f7f5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-container {
  height: 100%;
  width: 1140px;
  height: 200px;
}

.footer-container__first {
  display: flex;
  justify-content: space-between;
  margin-bottom: 55px;
}

.footer-container__first span {
  font-size: 15px;
  color: #2c2c2a;
}

.footer-container__second {
  /* display: flex; */
  text-align: start;
  margin-left: 22px;
}

.footer-container__second h6 {
  font-weight: bold;
}

.footer-container__second p {
  font-size: 11px;
}

.footer-container__second span {
  font-size: 12px;
  margin-right: 16px;
}

.footer__menu {
  width: 580px;
  display: flex;
  justify-content: space-around;
}

.footer__sns {
  width: 64px;
  height: auto;
  display: flex;
  justify-content: space-around;
}

.footer__sns svg {
  width: 28px;
  height: 28px;
  margin-left: 8px;
}

May I know the cause and solution of this problem?

Thank you in advance!

CodePudding user response：

The reason causes the problem is you just using px to set the width and margin based on your current resolution.

It will looks good and work find if the user has the same resolution with you, but will break the design when the user doesn't have same resolution with you.

For example, your use height: 300px; for .footer, it will work fine for your current resolution (let's say 1600*960), but on the user with different resolution (e.g 1200*800) the height for footer might be too big.

A possible solution is to use % to set the percentage for margin, height and width to make the element scale based on the percentage of screen height and screen width (different resolution)

Or you could use use css media rule to help you style.

The @media CSS at-rule can be used to apply part of a style sheet based on the result of one or more media queries. With it, you specify a media query and a block of CSS to apply to the document if and only if the media query matches the device on which the content is being used.

Check more here.