为谷歌克隆渲染页脚时遇到问题

Question

所以我基本上有两个问题。

1. 我使用了position:absolute和bottom:0来将页脚放在底部，但即使我使用width属性，它也不会变宽。

2. 当浏览器窗口缩短时，文本元素会被截断。

我会附上图片和为了清楚起见，我的 home.js 文件的一部分。我使用的是 css 简写（样式化组件），但相同的基础知识仍然适用。

在此处输入图像说明

在此处输入图像描述

import React from "react";
import styled from "styled-components";
import { Link } from "react-router-dom";


const Footer = styled.div`
  
`display: flex;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  flex-shrink: 0;
  box-sizing: border-box
  align-items: center;
  height: 93.5px;
  font-size: 14px;
  background: #f2f2f2;
  justify-content: space-between;
  
  
  @media only screen and (max-width: 1200px) {
    
    justify-content: space-evenly;
  
};

  padding: 0 20px;
  border-bottom: 1px solid #dadce0;
  font-size: 15px;
  color: #70757a;

`;

const FooterLinks = styled(Link)`
  display: flex;
  padding: 0 8px;

  text-decoration: none;
  color: #70757a;
`;

const LeftFooterLinks = styled.div`
  display: flex;
  padding: 10px;
  margin-left: 10px;
  justify-content: flex-start;
  min-width: 30%;
  order: 1;
`;

const RightFooterLinks = styled.div`
  display: flex;
  padding: 10px;
  margin-right: 16px;
  align-items: center;
  justify-content: flex-end;
  min-width: 30%;
  order: 3;
`;

const CenterFooterLink = styled.div`
  display: flex;
  padding: 10px;
  margin: 0 auto;

  align-items: center;
  order: 2;
  @media only screen and (max-width: 1200px) {
    order: 0;
    width: 100%;
    justify-content: center;
  }
`;

const Home = () => {
  return (
    <Container>
      <LogoSection>
        <img
          src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png"
          alt="google-logo"
        />
      </LogoSection>
      <SearchSection>
        <Form action="/" method="GET" role="search">
          <Search>
            <SearchIcon>
              <svg
                focusable="false"
                xmlns="http://www.w3.org/2000/svg"
                viewBox="0 0 24 24"
              >
                <path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" />
              </svg>
            </SearchIcon>
            <SearchInput type="text" />
            <MicIcon>
              <svg
                focusable="false"
                viewBox="0 0 24 24"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  fill="#4285f4"
                  d="m12 15c1.66 0 3-1.31 3-2.97v-7.02c0-1.66-1.34-3.01-3-3.01s-3 1.34-3 3.01v7.02c0 1.66 1.34 2.97 3 2.97z"
                />
                <path fill="#34a853" d="m11 18.08h2v3.92h-2z" />
                <path
                  fill="#fbbc05"
                  d="m7.05 16.87c-1.27-1.33-2.05-2.83-2.05-4.87h2c0 1.45 0.56 2.42 1.47 3.38v0.32l-1.15 1.18z"
                />
                <path
                  fill="#ea4335"
                  d="m12 16.93a4.97 5.25 0 0 1 -3.54 -1.55l-1.41 1.49c1.26 1.34 3.02 2.13 4.95 2.13 3.87 0 6.99-2.92 6.99-7h-1.99c0 2.92-2.24 4.93-5 4.93z"
                />
              </svg>
            </MicIcon>
          </Search>
        </Form>
        <ButtonSection>
          <button>Google Search</button>
          <button>I'm Feeling Lucky</button>
        </ButtonSection>
      </SearchSection>
      <Footer data-sfe="true" data-sfsw="1200" jsaction="rcuQ6b:npT2md">
        <LeftFooterLinks>
          <FooterLinks to="/">Advertising</FooterLinks>
          <FooterLinks to="/">Business</FooterLinks>
          <FooterLinks to="/">How Search Works</FooterLinks>
        </LeftFooterLinks>

        <CenterFooterLink>
          <FooterLinks to="/">Carbon neutral since 2007</FooterLinks>
        </CenterFooterLink>

        <RightFooterLinks>
          <FooterLinks to="/">Privacy</FooterLinks>
          <FooterLinks to="/">Terms</FooterLinks>
          <FooterLinks to="/">Settings</FooterLinks>
        </RightFooterLinks>
      </Footer>
    </Container>
  );
};

export default Home;

Answer 1

起初
您应该导入

1 - Container

2 - LogoSection

3 - SearchSection

4 - Form

5 - Search

6 - SearchIcon

7 - SearchInput

8 - MicIcon

9 - ButtonSection

您在设置页脚样式时出错。
这是编写样式的正确方法：

const Footer = styled.div`
  display: flex;
  flex-wrap: wrap;
  position: fixed;
  bottom: 0;
  flex-shrink: 0;
  box-sizing: border-box;
  align-items: center;
  height: 93.5px;
  font-size: 14px;
  background: #f2f2f2;
  justify-content: space-between;
  width: 100vw;
  
  @media only screen and (max-width: 1200px) {
    justify-content: space-evenly;
  }
`;