Question

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

标题下有<div id="topLine"></div>，高度为2px，可以拉伸浏览器/视口的整个宽度。当浏览器调整到较小的高度时，此div会消失（因此您可能无法在我链接到的codepen页面上看到它）。我希望它总是这样：website header with horizontal line。我尝试过更改z-index并使用不同的定位，但我似乎无法避免它消失。
<article>不会垂直展开到页面底部。文本垂直扩展到容器之外。我尝试过使用不同的定位，但我无法将其拉伸到页面底部。

我使用Chrome 47，IE 11和Edge 20时遇到此问题 - 所以它似乎不是浏览器特定的问题。

Answer 1

#topline的问题是html＆＃39} height: 100%;和body＆＃39; s height: 100%;。使用100%进行高度修复非常棘手。
article的问题是height: 100%;（再次 - 棘手）。一旦删除它对我来说就好了。

删除它们后，您将遇到其他height属性的问题。因此，你需要检查所有这些（遗憾的是）。

Height property at W3Schools

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

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

Answer 2

对于

（1） - 将标题的内容放入DIV，然后将标题设为100％并在其下面加上边框。

{{1}}

（2）对于{{1}}，只需删除高度（或设置为自动）。

修订笔：http://codepen.io/anon/pen/ZQaNNL

Answer 3

#topLine {
  width: 100%;
  height: 2px;
  background-color: orange;
position:absolute;/*here past postion*/
}


article {
  background-color: #ededed;
  width: 600px;
  height: ;  /*delete height */
  margin: 0px auto 0px auto;
  border-top-left-radius: 5px;
  border-top-right-radius: 50px;
  border-left: 5px solid #d3d3d3;
  border-right: 5px solid #f6f6f6;
}

Answer 4

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

article {
  flex: 1 1 auto;
}

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

Answer 5

看起来你必须做两处修改。首先是将#topline的位置改为绝对。

#topline{
position:absolute;
}

，第二个是将文章高度更改为auto。因为高度：100％只是在页面第一次加载之前将其高度设置为100％。但是当你开始滚动它时它不会缩小。

article{
height:auto;
}

做出改变，你会没事的。

当页面调整大小并且<article>没有正确调整大小时，<div>消失

5 个答案: