如何从页面顶部到底部拉伸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.