具有 screen-wide header、limit-width 内容、flexbox 徽标元素和粘性页脚的 HTML 页面

Question

我一直在努力让这个网站在桌面和移动设备上都能正常运行。起初，header 背景图像没有按预期拉伸，然后是 flexbox header 徽标元素，然后是粘性页脚。但他们从来没有一起工作过。我使用的粘性页脚代码可能太深奥了，所以我已经完全删除了它。这个问题很难描述，所以我创建了桌面和移动模型。请注意，第二个 flexbox div ("Register today") 移出 header，拉伸并附着在移动设备的底部。

当前的问题是：

移动 Div #2 ("Register today") 在移动视图 header 之外的 flexbox 中，并将其拉伸到内容宽度。这可能是不可能的，因为根据定义，flexbox 必须包含其所有 div。所以 Div #2 可能应该隐藏在移动设备上，并在 "Register today"
想出与所有这些兼容的粘性页脚代码

如果有什么需要澄清的，请在评论中提问，我会相应地编辑问题。

桌面布局

移动布局

html {
max-width: 800px;
margin: 0 auto;
}

body {
background-image:url('/img/bg.png');
background-repeat:repeat-x;
}

header {
display:flex;
flex-wrap: wrap;
height:116px;
background-color:grey;
justify-content:space-between;
align-items:center;
}

#logo {
margin-left:15px;
}

#register {
margin-right:35px;
}

#register a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}


/*#content 
{
margin: 0px 15px 0px 15px;
}
*/

footer
{
text-align:center;
font-size:small;
}

#copyright{
}


@media only screen and (orientation: portrait) {
html{
padding-right:15px;
padding-left:15px;
}

#logo {
margin:0;
}

#register {
 background:blue;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"> 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
</head>

<body>
<header>
<div id="logo"><a href="/" title="Home"><img src="/img/logo.png" srcset="/img/logo.png 1x, /img/logo2x.png 2x" width="354" height="85"></a></div>
<div id="register"><a href="/register">Register today!</a></div>
</header>

<div id="content">
<h1>Text content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>


<footer>
<div id="copyright">&copy; Copyright 2019 Copyright footer. Privacy policy</div>
</footer>
</body>
</html>

Answer 1

为了这个演示，我将您的媒体查询从 orientation: portrait 更改为 orientation: landscape。不确定这是否会很好地转换回您的网站，但这是我的解决方案。请注意，这些只是解决此问题的两种策略。还有其他方法可以做到这一点，但这些方法很简单：

1) 移动 Div #2 ("Register today") 在移动视图 header 之外的 flexbox 中并将其拉伸到内容宽度

给header一个position: relative和margin-bottom: 30px，然后div#register一个height: 30px，position: absolute，和一个bottom: -30px.

2) 提出与所有这些兼容的粘性页脚代码

给html和body一个height: 100%，body一个display: flex和flex-flow: column。给 div#content 一个 flex: 1.

  html {
  max-width: 800px;
  margin: 0 auto;
}

body {
  background-image: url('/img/bg.png');
  background-repeat: repeat-x;
}

header {
  display: flex;
  flex-wrap: wrap;
  height: 116px;
  background-color: grey justify-content:space-between;
  align-items: center;
}

#logo {
  margin-left: 15px;
}

#register {
  margin-right: 35px;
}

#register a {
  color: white;
  text-decoration: none;
  font-weight: bold;
  font-size: x-large;
}


/*#content 
{
margin: 0px 15px 0px 15px;
}
*/

footer {
  text-align: center;
  font-size: small;
}

#copyright {}

/*@media only screen and (orientation: portrait) {*/
@media only screen and (orientation: landscape) {
   html, body{
      margin: 0;
      height: 100%;
   }
  html {
    padding-right: 15px;
    padding-left: 15px;
  }
  header{
     background: gray;
     display: block;
     width: 100%;
     position: relative;
         height: auto;
    margin-bottom: 30px;
  }
  footer{
     background: lightblue;
  }
  #logo {
    margin: 0 auto;
    max-width: 356px;
  }
  #register {
    background: blue;
    margin: 0;
        height: 30px;
    position: absolute;
    bottom: -30px;
    width: 100%;
  }
  
  body{
     display: flex;
     flex-flow: column;
  }
  
  #content{
     flex: 1;
  }

  <header>
    <div id="logo">
      <a href="/" title="Home">
        <img src="http://placekitten.com/354/85" />
       </a>
    </div>
    <div id="register"><a href="/register">Register today!</a></div>
  </header>

  <div id="content">
    <h1>Text content</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>


  <footer>
    <div id="copyright">&copy; Copyright 2019 Copyright footer. Privacy policy</div>
  </footer>

Answer 2

基本上这是你想要的布局：https://pj0z6.csb.app/（如果你的浏览器没有缩小到 600px 宽度以下，只需将 devTools 设置到右侧或左侧并使其更宽，以便你的视口更小；此示例小于 600 像素）。

将 window 的宽度调整到 600 像素以下以查看响应式（移动）布局。您看不到它在堆栈溢出编辑器中运行良好，但是该代码是相同的。或者您可以看到它 here on codesandbox（虽然不会让您轻松调整 window 的大小，因此第一个 link）。

600px视口宽度只是一个粗略的数字，你可以修改它。基本上媒体查询之外的所有样式代码都是针对 responsive/mobile - 600px View Port (VP) 宽度（或您的纵向媒体查询）；里面的所有代码都适用于 600px 以上的 VP 宽度（最小宽度：600px，最小 600px 宽度，应用此样式）。

我看到您想将内容垂直居中。这可能是可以做到的。懒惰的方式，通过 JS，或者更多地思考一些 CSS 魔法。如果你真的想要那个，你可以自己做。

至于过渡，因为您只提供了移动布局和桌面布局，而不是介于两者之间，所以我将桌面代码应用到 600px，但某些元素的宽度为 100%，直到它们达到您定义的 800px 为止。

尽情享受吧。

body {
  font-family: sans-serif;
}
html,
body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
header {
  background-color: orangered;
  height: 100px;
  display: flex;
  justify-content: center;
}
header .join-link {
  display: none;
}
.header-wrap {
  align-self: center;
}
.logo img {
  display: block;
}
.join-link {
  text-align: center;
  background-color: greenyellow;
}
section {
  padding: 0 20px;
}
footer,
.push {
  height: 50px;
}
footer {
  text-align: center;
  background-color: aqua;
  line-height: 50px;
}

/* DESKTOP */
@media (min-width: 600px) {
  header {
    display: flex;
    justify-content: center;
  }
  .header-wrap {
    max-width: 800px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
  .logo {
    margin-left: 20px;
  }
  .join-link {
    display: none;
  }
  header .join-link {
    display: block;
    margin-right: 20px;
    align-self: center;
  }
  section {
    max-width: 800px;
    width: calc(100% - 40px);
  }
  footer {
    max-width: 900px;
    width: 100%;
  }
  section,
  footer {
    margin-left: auto;
    margin-right: auto;
  }
}

<html>
<body>
 <div class="wrapper">
  <header>
   <div class="header-wrap">
    <div class="logo">
     <img src="https://placekitten.com/200/50" alt="logo" />
    </div>
    <div class="join-link">
     <a href="#">Join us</a>
    </div>
   </div>
  </header>
  <div class="join-link">
   <a href="#">Join us</a>
  </div>
  <section>
   <h1>Content section</h1>
   <p>Recusandae eius et distinctio numquam ut culpa. Facilis eligendi molestiae rerum esse. Dolorem nostrum distinctio voluptas. Rerum iste et tenetur necessitatibus. Quidem voluptas quo omnis recusandae aut eum totam omnis. Repellendus blanditiis corporis ut aliquid sunt aut cupiditate aliquam.</p>
  </section>
  <div class="push"></div>
 </div>
 <footer>
  This is the footer
 </footer>

 <script src="src/index.js">
 </script>
</body>
</html>

具有 screen-wide header、limit-width 内容、flexbox 徽标元素和粘性页脚的 HTML 页面

An HTML page with screen-wide header, limit-width content, flexbox logo elements, and sticky footer

html

css

responsive-design

sticky-footer