当页面大小调整和<article>不正确调整大小时，<article>消失

Question

我正在创建我的第一个网站，但我遇到了两个问题。您可以查看页面和我的代码这里。

1. 在2px高的标题下有<div id="topLine"></div>，它扩展了browser/ viewport的整个宽度。当浏览器的大小调整到更小的高度时，这个div就消失了(所以您可能不会在我链接到的代码页上看到它)。我希望它永远看起来像这样：带有水平线的网站标题。我试过改变z指数，并使用不同的位置，但我似乎无法阻止它消失。
2. <article>不会垂直展开到页面底部。文本垂直展开通过容器。我试过使用不同的位置，但我无法使它延伸到页面的底部。

我使用Chrome 47、IE11和Edge 20解决了这个问题--所以它似乎不是浏览器特有的问题。

Answer 1

#wrapper {
  display:flex;
  flex-direction:column;
  height:100vh;
}

article {
  flex: 1 1 auto;
}

http://codepen.io/anon/pen/rxYEBw

Answer 2

1. #topline的问题是html的height: 100%;和body的height: 100%;，使用100%来固定身高真的很棘手。
2. article的问题在于它的height: 100%; (同样棘手)。一旦移除，对我来说就很好了。

在移除这两种属性之后，您将遇到一些其他height属性的问题。正因为如此，你将需要检查他们所有的(遗憾)。

W3Schools高度属性

您可以使用#topline属性解决border问题，而不是将其背景变为橙色。

您可以使用javascript轻松地将article扩展到底部。

Answer 3

为

(1) -将标题的内容放入DIV中，然后使标题100%，并在其下放置一个边框。

<header>
    <div>
        <img id="logo" src="http://arkelectronics.ca/arkLogo.png" alt="Logo">
        <h1>ARK Electronics</h1>
    </div>
</header>

header {
  width: 100%;
  text-align:center;
  border-bottom:2px solid orange;
}
header>div{width:600px;margin:0 auto;}

(2)对于<article>，只需移除高度(或设置为auto)。

修改后的pen：http://codepen.io/anon/pen/ZQaNNL