[英]How do I make a container fill the whole page? Also to be responsive
I have different sections like "About me", "Contact", "Photo gallery" etc, and I want that when I open the site, the "About me" container to be displayed on the whole page, to fill the page without any content from the next section to appear. 我有不同的部分,例如“关于我”,“联系人”,“照片库”等,我希望当我打开网站时,“关于我”容器将显示在整个页面上,以填充页面而没有任何内容内容将从下一部分出现。
<div class="container-fluid bg-2 text-left">
<div id="About me">
<h1 class="margin">About me</h1>
<p> My text here</p>
</div>
</div>
I have the "container-fluid" class for every container with content in the index file. 对于索引文件中包含内容的每个容器,我都有一个“容器流体”类。
.container-fluid {
padding-top: 70px;
padding-bottom: 70px;
}
Any idea would be greatly appreciated! 任何想法将不胜感激!
That should addapt to the width of the browser at every state. 这应该增加每种状态下浏览器的宽度。
.container-fluid {
width:100%
padding:70px 0px 70px 0px;
}
You could use viewport relative units . 您可以使用视口相对单位 。
.example {
min-height: 100vh;
min-width: 100vw;
}
give the about container a height:100vh; width:100%;
给容器大约
height:100vh; width:100%;
height:100vh; width:100%;
.container-fluid {
width:100%
padding:70px 0px 70px 0px;
margin :0;
}
If above code not work write !important as like padding:70px 0px 70px 0px!important; 如果上面的代码不起作用,请像填充这样写!important:70px 0px 70px 0px!important; Sometimes old style not override by new style so you make it important by writing above statement.
有时旧样式不会被新样式覆盖,因此您可以通过编写上述声明来使其变得重要。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.