I'd like to create a page with multiple 100% divs, stacked on top of one another. Similar to the Bootstrap Cover Template Example, but with additional div's underneath the first screen. I've tried looking around a lot but haven't been able to find a solution. I know it's out there, maybe I'm just searching for the wrong things.
我想创建一个包含多个100%div的页面,堆叠在一起。类似于Bootstrap封面模板示例,但在第一个屏幕下方有额外的div。我已经尝试过四处寻找,但一直无法找到解决方案。我知道它在那里,也许我只是在寻找错误的东西。
4 个解决方案
#1
4
Using div's with a 100% height won't solve your problem. Since you're already looking at the Bootstrap I assume that you're not afraid of using Javascript or Jquery. Therefor, you can use this little code to set the height of you div always 100% of your screen.
使用100%高度的div将无法解决您的问题。既然你已经在看Bootstrap我假设你不怕使用Javascript或Jquery。因此,您可以使用这个小代码来设置div的高度始终是屏幕的100%。
$("div_name").css("min-height", $(window).height() );
Using this little code, will set the height of your div that's wrapping your section. So, for every part of your website that needs the height of your window ( 100% ) you have to use a 'wrapper' div. So it would be something like this:
使用这个小代码,将设置包裹您的部分的div的高度。因此,对于需要窗口高度(100%)的网站的每个部分,您必须使用“包装”div。所以它会是这样的:
<div class="section">
<h2>Section 1!</h2>
<p>This is just an section with the same height as your browser.</p>
</div>
<div class="section">
<h2>Section 2!</h2>
<p>This is just an section with the same height as your browser.</p>
</div>
If you want an example, you can take a look at my portfolio: http://portfolio.stikkie.net/
如果你想要一个例子,你可以看看我的投资组合:http://portfolio.stikkie.net/
#2
5
The key is to remind the html and body that they can be 100% height. : fiddle
关键是要提醒html和正文,它们可以达到100%的高度。 :小提琴
p.s. you don't need bootstrap
附:你不需要bootstrap
HTML
<section class="cover-thing first">
first
</section>
<section class="cover-thing second">
second
</section>
<section class="cover-thing third">
third
</section>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0;
}
.cover-thing {
width: 100%;
height: 100%;
float: left;
}
.first {
background-color: #333;
color: white;
}
.second {
background-color: #eee;
}
.third {
background-color: #f06;
}
#3
0
To manage multiple - full screen - stacked divs, you have to use javascript in addition of css, because css can't make a 100% height on elements based on your screen size. for example, add :
要管理多个 - 全屏 - 堆叠的div,你必须使用除了css之外的javascript,因为css不能根据你的屏幕大小在元素上实现100%的高度。例如,添加:
$("body > div").style("height", $(document).height());
to set the height of your screen on each direct child div of your body tag.
在身体标签的每个直接子div上设置屏幕的高度。
#4
0
I am using sections with the below css, it covers the entire screen. This should help.
我正在使用下面的css部分,它涵盖了整个屏幕。这应该有所帮助。
CSS
.section{ height:100vh; }.
.section {身高:100vh; }。
1vh = 1% of viewport height and 100vh = 100% of height. Here is the Fiddle
1vh =视口高度的1%和100vh = 100%的高度。这是小提琴
#1
4
Using div's with a 100% height won't solve your problem. Since you're already looking at the Bootstrap I assume that you're not afraid of using Javascript or Jquery. Therefor, you can use this little code to set the height of you div always 100% of your screen.
使用100%高度的div将无法解决您的问题。既然你已经在看Bootstrap我假设你不怕使用Javascript或Jquery。因此,您可以使用这个小代码来设置div的高度始终是屏幕的100%。
$("div_name").css("min-height", $(window).height() );
Using this little code, will set the height of your div that's wrapping your section. So, for every part of your website that needs the height of your window ( 100% ) you have to use a 'wrapper' div. So it would be something like this:
使用这个小代码,将设置包裹您的部分的div的高度。因此,对于需要窗口高度(100%)的网站的每个部分,您必须使用“包装”div。所以它会是这样的:
<div class="section">
<h2>Section 1!</h2>
<p>This is just an section with the same height as your browser.</p>
</div>
<div class="section">
<h2>Section 2!</h2>
<p>This is just an section with the same height as your browser.</p>
</div>
If you want an example, you can take a look at my portfolio: http://portfolio.stikkie.net/
如果你想要一个例子,你可以看看我的投资组合:http://portfolio.stikkie.net/
#2
5
The key is to remind the html and body that they can be 100% height. : fiddle
关键是要提醒html和正文,它们可以达到100%的高度。 :小提琴
p.s. you don't need bootstrap
附:你不需要bootstrap
HTML
<section class="cover-thing first">
first
</section>
<section class="cover-thing second">
second
</section>
<section class="cover-thing third">
third
</section>
CSS
*, *:before, *:after {
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
margin: 0;
}
.cover-thing {
width: 100%;
height: 100%;
float: left;
}
.first {
background-color: #333;
color: white;
}
.second {
background-color: #eee;
}
.third {
background-color: #f06;
}
#3
0
To manage multiple - full screen - stacked divs, you have to use javascript in addition of css, because css can't make a 100% height on elements based on your screen size. for example, add :
要管理多个 - 全屏 - 堆叠的div,你必须使用除了css之外的javascript,因为css不能根据你的屏幕大小在元素上实现100%的高度。例如,添加:
$("body > div").style("height", $(document).height());
to set the height of your screen on each direct child div of your body tag.
在身体标签的每个直接子div上设置屏幕的高度。
#4
0
I am using sections with the below css, it covers the entire screen. This should help.
我正在使用下面的css部分,它涵盖了整个屏幕。这应该有所帮助。
CSS
.section{ height:100vh; }.
.section {身高:100vh; }。
1vh = 1% of viewport height and 100vh = 100% of height. Here is the Fiddle
1vh =视口高度的1%和100vh = 100%的高度。这是小提琴