如何將div從頁面頂部延伸到頁面底部？

看，我知道有許多解決方案的線程，但他們都沒有爲我工作。我是一個begginer，我剛開始用HTML製作網站。我曾嘗試過創建網站，但我遇到了同樣的問題。我刪除了前一個並創建了一個新的，但仍然無法解決此問題。如何將div從頁面頂部延伸到頁面底部？

我已經試過，並不真的工作：

設置高度爲100％/ 100vh（方法1）
設置DIV最小高度爲100％，給它絕對定位並且這樣做：
```
top: 0px 

bottom: 0px 
```

（方法2）

當我執行方法1時，當您可以滾動頁面時，我的div不會拉伸到頁面的底部，而是延伸至瀏覽器窗口的100％高度。

而當我做方法2的div只是消失。我沒有強迫邊界伸展，所以你仍然可以看到它，但如果我這樣做，它會消失。

順便說一句，我只是一個begginer，我甚至不知道JavaScript，jQuery等的基本知識，所以我想只使用純HTML和CSS，而不是JavaScript和其他的東西，直到我學習他們。

編輯：添加文本時DIV也需要拉伸，實際上這是我的主要問題之一。

來源

2016-10-04 SaJmoN

試試這個......你可以用樣式猴子來製作你想要的樣子。我把你的邊框放在.Main裏，並將html, body改爲height: 100%

注意：定位看起來很時髦，因爲你使用了絕對定位的Main邊距。我會改變這一點。但是如果你把代碼複製到你的頁面上，那可能就是你想要的。

html, body { 
 
    height: 100%; 
 
} 
 

 
.page { 
 
    background: linear-gradient(#2d5aa4, #03637c); 
 
    height: 100%; 
 
    margin: 0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    position: relative; 
 
} 
 

 
.NavigationBar { 
 
    background: linear-gradient(to right, #636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    bottom: 0px; 
 
    width: 220px; 
 
    min-height: 100%; 
 
    z-index: 2; 
 
    font-family: BloggerSans; 
 
    font-size: 1.5em; 
 
} 
 
.NavigationBarBorder { 
 
    background: linear-gradient(to right, #292929, #171617); 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    width: 10px; 
 
    min-height: 100%; 
 
    z-index: 3; 
 
} 
 

 
.MainParent { 
 
    position: relative; 
 
    min-height: 100%; 
 
} 
 

 
.NavigationTop { 
 
    background: linear-gradient(#636363, #4e4e4e); 
 
    position: absolute; 
 
    left: 220px; 
 
    width: calc(100vw - 220px); 
 
    height: 75px; 
 
    z-index: 1; 
 
    font-family: Jaapokki; 
 
    font-size: 2em; 
 
} 
 

 
.Main { 
 
    background: linear-gradient(#ffffff, #e8e8e8); 
 
    position: absolute; 
 
    top: 20vh; 
 
    bottom: 0px; 
 
    width: calc(100vw - 440px); /* set your width */ 
 
    left: 220px; 
 
    margin-left: 90px; /*set your margin here */ 
 
    min-height: 100%; 
 
    z-index: 4; 
 
    padding-left: 40px; 
 
} 
 

 
.MainBorder { 
 
    background: linear-gradient(#f79104, #e9720d); 
 
    position: absolute; 
 
    top: -10px; 
 
    left: 0; 
 
    width: 40px; 
 
    min-height: 100%; 
 
} 
 

 
h1 { 
 
    font-family: 'Jaapokki'; 
 
    text-align: center; 
 
    font-size: 3em; 
 
} 
 

 
.Text { 
 
    font-family: 'BloggerSans'; 
 
    font-size: 2em; 
 
}

<body class="page"> 
 
    <div class="MainParent"> 
 
     <nav class="NavigationBar"> 
 
      <div class="NavigationBarBorder"></div> 
 
      Table of content 
 
     </nav> 
 
     <header class="NavigationTop"> 
 
      Navigation 
 
     </header> 
 
     <div class="Main"> 
 
      <h1>Title</h1> 
 
      <div class="Text"> 
 
       Text </br> 
 
      </div> 
 
      <div class="MainBorder"></div> 
 
     </div> 
 
    </div> 
 
</body>

來源

2016-10-04 18:02:50 mhatch

我的境界不應該。主要的裏面，因爲它需要伸出一點點，就像這樣： http://i.imgur.com/YniYk5L.png 但謝謝你的回答。很抱歉在開始時奇怪的答案，但我認爲輸入實際上並不意味着「回答」或「保存」。 – SaJmoN

@SaJmoN只需使用負頂部'頂部：-10px' – mhatch

我也建議給你的主寬度，然後從左側定位。您現在的方式，如果瀏覽器變窄，主體將消失。 – mhatch

如何將div從頁面頂部延伸到頁面底部？

回答

相關問題