<div> 調整頁面大小時消失，並且 <article> 調整大小不正確

Question

我正在創建我的第一個網站，但遇到了兩個問題。 您可以在此處查看頁面和我的代碼。

1. 標頭下有一個<div id="topLine"></div> ，其高度為2px，並拉伸了瀏覽器/視口的整個寬度。 當將瀏覽器調整為較小的高度時，該div消失（因此您可能不會在我鏈接到的代碼筆頁面上看到它）。 我希望它始終像這樣： 帶水平線的網站標題 。 我嘗試過更改z-index並使用其他定位，但是似乎無法阻止它消失。

2. <article>不會垂直擴展到頁面底部。 文本在容器上方垂直擴展。 我嘗試使用其他位置，但無法使其延伸到頁面底部。

我在使用Chrome 47，IE 11和Edge 20時遇到了這個問題-因此，這似乎並不是瀏覽器的特定問題。

Answer 1

1. #topline的問題是html的height: 100%; 和body的height: 100%; 。 使用100%固定高度確實很棘手。

2. article的問題是它的height: 100%; （再次-棘手）。 刪除后，對我來說效果很好。

刪除它們兩個之后，其他height屬性將出現一些問題。 因此，您將需要（悲傷地）檢查所有它們。

W3Schools的Height屬性

您可以使用border屬性解決#topline ，而不是使其背景變成橙色。

您可以使用javascript輕松將article擴展到最底部。

Answer 2

對於

（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）。

經修訂的筆： 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;
}

第二個是將文章高度更改為自動。 因為height：100％只會使其高度為100％，直到頁面首次加載為止。 但是，當您開始滾動時，它不會縮小。

article{
height:auto;
}

進行更改，您就可以了。