CSS响应式设计问题

Question

我在建立这个网页时遇到一些问题。 该代码粘贴在下面，但您也可以在这里查看：

这是使我无法完成的主要问题。 最重要的是第一期。 真的让我发疯了！！！

1. 小于490px和大于320px的窗口大小有3个元素，其宽度缩小的幅度大于其他全角元素。 您会看到header-left和header-right元素（以移动大小堆叠）和footer元素的收缩程度都比页面的其余部分要大，从而导致页面的右侧不对齐。 某种原因使元素无法平均崩溃。

2. 另外，我将页脚绝对定位在页面的底部，但我也将页脚向上移动了100px，以便它在上方的文本下方向上滑动。 但这在页面底部留下了空白。 有什么办法可以缩小这一差距？

非常感谢您能给我的任何帮助。 皮特

 * { box-sizing: border-box; } html { font-size: 16px; } html, body, p { margin: 0; padding: 0; } body { font-family: "Arial Narrow", Helvetica, sans-serif; color: black; font-size: 16px; font-size: 1rem; } p { line-height: 1; margin: 0; padding: 0; } .container { padding: 0; max-width: 1239px; margin: 0 auto; margin-bottom: -137px; } header { display: table; vertical-align: top; height: 200px; z-index: 1004; } .header-left { display: table-cell; vertical-align: top; width: 78%; color: #fff; background-color: #00948f; box-shadow: 7px 15px 18px #aaa; -webkit-box-shadow: 7px 15px 18px #aaa; position: relative; } .header-left h1 { font-size: 50px; font-size: 3.125rem; margin: 0; letter-spacing: 2px; background-color: #00948f; width: 100%; padding: 20px 85px 30px 138px; line-height: 1.1; margin: 0; } .header-left h1 span { font-size: 30px; font-size: 1.875rem; line-height: 1; display: inline-block; margin-bottom: 20px; } .header-spacer { display: table-cell; width: 2%; } .header-right { display: table-cell; width: 21%; background-color: #9fd2d0; box-shadow: 7px 15px 18px #aaa; -webkit-box-shadow: 7px 15px 18px #aaa; z-index: 1002; padding: 175px 61px 0 20px; line-height: 1.3; font-size: 28px; font-size: 1.75rem; } .small-box { width: 8%; height: 33px; background-color: #9fd2d0; z-index: 1005; padding: 0; } .center-table { display: table; width: 100%; margin-top: 10px; } .center-row { display: table-row; } .vert-spacer { display: table-cell; background-color: #e6e7e8; z-index: -2; width: 8%; } main { display: table-cell; width: 69%; } .main-body { margin-left: 20px; height: 100%; } .main-body p:first-child { font-size: 44px; font-size: 2.75rem; } .main-body p:nth-child(2) { font-size: 27px; font-size: 1.6875rem; } .main-body .hr { border-top: 10px solid white; margin: 20px 0; } .main-body p:nth-child(3) { font-size: 27px; font-size: 1.6875px; } .main-body-header { background-color: #9fd2d0; padding: 10px 25px 15px; margin-bottom: 20px; } .main-body-header p:first-child { font-size: 44px; font-size: 2.75rem; margin-bottom: 10px; } .main-body-header p:nth-child(2) { font-size: 27px; font-size: 1.6875rem; } .main-body-header hr { border-width: 10px; } .main-body-header p:nth-child(4) { font-size: 30px; font-size: 1.875rem; text-align: center; margin-bottom: 5px; } .main-body-header p:nth-child(5) { font-size: 24px; font-size: 1.5rem; text-align: center; margin-bottom: 10px; } .main-body-header p:nth-child(6) { font-size: 24px; font-size: 1.5rem; } .foot-note { font-size: 20px !important; font-size: 1.25rem !important; margin-bottom: 1.25rem; } .co-chairs { font-size: 22px !important; font-size: 1.375rem !important; margin-bottom: 20px; } .co-chairs span { color: #00837c; } table { font-size: 23px; font-size: 1.4375rem; border-collapse: collapse; } table th { text-align: left; padding-left: 20px; } table tr td { padding: 5px; } table tr td:first-child { width: 20%; } table tr td:nth-child(2) { width: 55%; } table tr td:nth-child(3) { width: 25%; text-align: right; padding-right: 20px; } table tr.header { text-transform: uppercase; font-size: 28px; font-size: 1.75rem; background-color: #00948f; color: white; } table tr.header th { border-top: 5px solid black; } table tr:not(agenda) td { border-bottom: 3px solid #00948f; } table tr.qa { background-color: #e5f4f4; } table tr.break { background-color: #cdeae9; } aside { padding: 0 20px; display: table-cell; width: 21%; text-align: top; } aside .list-header { text-transform: uppercase; color: #004a99; font-size: 28px !important; font-size: 1.75rem !important; margin-bottom: 10px; } aside .faculty-list { list-style: none; padding: 0; font-size: 18px; font-size: 1.125rem; color: #a0a0a0; } aside .faculty-list li { margin-bottom: 15px; } aside .faculty-list li span { display: inline-block; color: black; font-size: 23px; font-size: 1.277777778rem; } footer { position: absolute; left: 0; right: 0; bottom: 137px; z-index: 10000; position: relative; min-width: 420px; background-color: #00948f; width: 100%; height: 402px; z-index: -2; } footer p { position: absolute; left: 20px; bottom: 30px; font-size: 19px; font-size: 1.1857rem; line-height: 1.3; } footer .logo { position: absolute; right: 60px; bottom: 30px; width: 90px; height: 90px; background-color: #9fd2d0; display: inline-block; } @media screen and (max-width: 767px) { .header-left, .header-right { display: block; width: auto; } .header-left { margin: 0 20px; } .header-left h1 { font-size: 40px !important; font-size: 2.5rem !important; padding: 20px !important; } .header-left h1 span { font-size: 15px !important; font-size: 0.9375rem !important; } .header-right { padding: 20px !important; margin: 30px 20px 0; } .small-box { display: none; } .vert-spacer { display: none; } main, aside { display: block; width: auto; } .main-body { margin: 20px; } .main-body-header p:first-child { text-align: center; font-size: 40px; font-size: 2.5rem; } } @media screen and (max-width: 1120px) { footer p { bottom: 100px; } footer .logo { right: auto; left: 20px; bottom: 5px; } } 

 <!DOCTYPE html> <html lang="en-us"> <head> <title>Lorem ipsum dolor sit amet</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- strongly recommended by the Bootstrap --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" type="text/css" href="app.css"> </head> <body> <div class="container"> <header class="header"> <div class="tbl-row"> <div class="header-left"> <h1> <span>Lorem ipsum dolor sit amet, consectetur adipiscing</span><br/> Excepteur sint occaecat cupidatat<br/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum </h1> </div> <div class="header-spacer"></div> <div class="header-right"> <p>Ut enim ad minim veniam, quis nostrud</p> </div> </div> </header> <div class="small-box"></div> <!-- CENTER TABLE --> <div class="center-table"> <!-- CENTER ROW --> <div class="center-row"> <div class="vert-spacer"></div> <!-- MAIN --> <main> <div class="main-body"> <div class="main-body-header"> <p><strong>WEBCAST</strong>TRANSMITTED LIVE ON</p> <p>Sunday, 9 December 2018, 3:00 (EST) from New York, NY</p> <div class="hr"></div> <p><strong>Webcast:</strong><em>To View From Your Home or Office, Register at:</em></p> <p>www.irure dolor in reprehenderit.com</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.</p> </div> <p class="foot-note">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud.</p> <p class="co-chairs"><span>Co-Chairs:</span> John Jones (Brazil), George Orwell (London, England)</p> <table class="table"> <thead> <tr class="header"> <th colspan="3">agenda</th> </tr> </thead> <tbody> <tr> <td>09:00 – 09:05</td> <td>Welcome and Introduction</td> <td>Co-Chairs</td> </tr> <tr> <td>09:05 – 09:30</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td> <td>John Jones</td> </tr> <tr class="qa"> <td>09:30 – 09:35</td> <td colspan="2">Q&A</td> </tr> <tr> <td>09:35 – 10:00</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td> <td>George Orwell</td> </tr> <tr class="qa"> <td>10:00 – 10:05</td> <td colspan="2">Q&A</td> </tr> <tr> <td>10:05 – 10:30</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td> <td>Who Cares</td> </tr> <tr class="qa"> <td>10:30 – 10:35</td> <td colspan="2">Q&A</td> </tr> <tr class="break"> <td>10:35 – 11:05</td> <td colspan="2">Break</td> </tr> <tr> <td>11:05 – 11:30</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td> <td>Sam Man</td> </tr> <tr class="qa"> <td>11:30 – 11:35</td> <td colspan="2">Q&A</td> </tr> <tr> <td>11:35 – 12:35</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</td> <td>Faculty</td> </tr> <tr> <td>12:35 – 12:45</td> <td>Closing Remarks</td> <td>Co-Chairs</td> </tr> </tbody> </table> <!-- /table --> </div> <!-- /main-body --> </main> <!-- /MAIN --> <!-- ASIDE --> <aside> <div class="main-body"> <p class="list-header">Co-Chairs</p> <ul class="faculty-list"> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> </ul> <p class="list-header">faculty</p> <ul class="faculty-list"> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> <li> <span>John Jacob</span> <br/> Expert in Stuff <br/> Lorum ipsum Division <br/> Department of Lorem Ipsum <br/> 200 Car Talk Tower, Dewey Cheatum & Howe <br/> Cambridge, MA </li> </ul> </div> <!-- /main-body --> </aside> <!-- /ASIDE --> </div> <!-- /CENTER ROW --> </div> <!-- /CENTER TABLE --> <!-- FOOTER --> <footer> <p> Copyright © 2018 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt <br/> XXX-999999-YY </p> <div class="logo">LOGO GOES HERE</div> </footer> <!-- /FOOTER--> </div> <!-- /container --> </body> </html> 

Answer 1

这应该解决问题＃1：

.container {
    width: fit-content;
}