html - CSS响应式设计问题

标签 html css responsive-design media-queries

我正在构建的网页存在一些问题。代码粘贴在下方，但您也可以在此处查看:

以下是阻碍我完成它的主要问题。最重要的是第一个问题。这真的让我发疯!!!

  1. 在 490 像素以下和 320 像素以上的窗口大小中，有 3 个元素的宽度比其他全宽元素缩小得更多。您可以看到 header-left 和 header-right 元素(以移动尺寸堆叠)和页脚元素都比页面的其余部分收缩得更多，导致页面的右侧超出了一行。有些东西阻止元素均匀地折叠。

  2. 此外，我已将页脚绝对定位在页面底部，但我也将其向上移动了 100 像素，以便它向上滑动到上面的文本下方。但这会在页面底部留下空白。有什么办法可以弥补这个差距吗？

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

* {
  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>

最佳答案

这应该可以解决问题 #1:

.container {
    width: fit-content;
}

关于html - CSS响应式设计问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53216311/

上一篇：javascript - 如何使用 Jquery 在 5 秒后卸载加载到 div 标签中的 HTML 页面？

下一篇：html - Bootstrap HTML - 中型设备注册为大

相关文章：

html - Favicon 不适用于根网站，仅在刷新后适用于特定网站

html - 响应式 Div 布局重排

jquery - 在滚动条上交叉淡入淡出固定背景图像

html - 使用 Bootstrap CSS 的导航栏元素顺序

javascript - 基于http或https协议(protocol)动态加载javascript

javascript - 将文本字段中的文本添加到 JavaScript 中的选择框中？

javascript - 如何在加载时切换图像

css - 媒体查询在景观中无法正常工作

html - 使页脚与内容不重叠

html - 固定位置页脚无法在屏幕外水平滚动

©2024 IT工具网  联系我们