如何從頁面頂部到底部拉伸div？
[英]How to stretch div from top to the bottom of the page?
問題描述
看，我知道有很多線程提供許多解決方案，但是沒有一個對我有用。 我是一個初學者，我剛開始用HTML制作網站。 我曾經嘗試過建立一個網站，但是遇到了同樣的問題。 我已經刪除了上一個，但是又做了一個新的，我仍然無法解決。
我嘗試過但沒有真正起作用的東西：
- 將高度設置為100％/ 100vh（方法一）
將div的最小高度設置為100％，為其賦予絕對位置，然后執行以下操作：
top: 0px bottom: 0px
（方法二）
當我執行方法1時，可滾動頁面時，div不會延伸到頁面底部，而是延伸到瀏覽器窗口的100％高度。
當我執行方法2時，div消失了。 我沒有強迫邊界伸展，以便您仍然可以看到它，但是如果我這樣做，它將消失。
順便說一句，我只是一個入門者，我什至都不知道JavaScript，jQuery等的基礎知識。因此，在我學習它們之前，我只想使用純HTML和CSS，而不使用JavaScript和其他東西。
編輯：添加文本時，DIV也需要拉伸，實際上這是我的主要問題之一。
1 個解決方案
解決方案1
1 已采納 2016-10-04 18:02:50
嘗試一下…您可以隨意使用樣式，以使其達到您想要的方式。 我將邊框放在.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>
如何制作一個從上到下連接到頁面的垂直div容器？
[英]How to make a vertical div container connected from top to bottom to the page?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.