HTML 100％高度，具有多个内联滚动div [英] HTML 100% Height with multiple inline scrolling divs
本文介绍了HTML 100％高度，具有多个内联滚动div的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想实现这种布局：
- 页面
-
- 页面填满整个浏览器的高度
- 每当标题（橄榄，蓝色，黄色，橙色）变高时，绿色和红色应该仍然填满页面， >
我一直在尝试一段时间，但我不知道如何使绿色（和红色）部分采取其余的页面大小。我不想使用绝对定位，因为我需要页面对标题的动态大小做出反应。
这里是我到目前为止：
I am trying to achieve this layout:
- Page is 1200px wide and centered
- Page fills 100% of the browser's height
- Page does not scroll
- The green and red divs should have inline scrolling instead
- Whenever the header (olive, blue, yellow, orange) gets higher, green and red should still fill the page but not more
I have been trying for some time now, but I don't know how to make the green (and red) part take the rest of the page's size. I don't want to use absolute positioning since I need the page to react to the header's dynamic size. Also, I don't really want to use Javascript if possible.
Here's what I've got so far: https://jsfiddle.net/n3uefLmp/
CSS:
html, body {
margin: 0px;
height: 100%;
}
#page {
position: relative;
margin: 0 auto;
width: 1200px;
min-height: 100%;
max-height: 100%;
height: auto !important;
}
#bar1 {
min-height: 40px;
background-color: olive;
}
#bar2 {
width: calc(100% - 175px);
height: 40px;
background-color: blue;
}
#bar3 {
width: calc(100% - 175px);
height: 135px;
overflow: hidden;
background-color: yellow;
}
#rightBox {
position: absolute;
right: 0px;
width: 175px;
height: 175px;
background-color: orangered;
float: right;
}
#left {
background-color: green;
min-height: 100%;
max-height: 100%;
width: 50%;
}
HTML:
<body>
<div id="page">
<header>
<div id="bar1"></div>
<div id="rightBox"></div>
<div id="bar2"></div>
<div id="bar3"></div>
<div style="clear: both;"></div>
</header>
<div id="left">
bla
</div>
</div>
</body>
Any ideas on how I could achieve that layout using pure html/css?
Thanks!
解决方案
Using flexbox model make your design more easy. Look here:
html, body {
height: 100%;
width: 100%;
}
html {
background-color: rgb(160,160,100);
}
body {
padding: 0;
margin: 0;
}
main {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
max-width: 1200px;
margin: 0 auto;
height: 100%;
}
header {
min-height: 40px;
flex: 0 0 40px;
background-color: rgba(100, 100, 0, 0.4);
overflow: hidden;
}
nav {
min-height: 80px;
flex: 0 0 80px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.logo {
min-width: 80px;
flex: 0 0 auto;
background-color: yellow;
overflow: hidden;
}
.nav-wrapper {
flex: 1 1 auto;
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
}
.nav-wrapper > div {
flex: 1 1 auto;
overflow: hidden;
}
.nav-wrapper > div:first-child {
background-color: blue;
}
.nav-wrapper > div:last-child {
background-color: grey;
}
.main {
flex: 1 1 auto;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-content: stretch;
align-items: stretch;
overflow: auto;
}
.main > div {
flex: 1 1 50%;
line-height: 3em;
align-self: auto;
overflow: auto;
}
.main > div:first-child {
background-color: rgba(255, 0, 0, 0.4);
}
.main > div:last-child {
background-color: rgba(0, 100, 0, 0.4);
}
<main>
<header>
</header>
<nav>
<div class="nav-wrapper">
<div></div>
<div></div>
</div>
<div class="logo"></div>
</nav>
<div class="main">
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
<div>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</div>
</div>
</main>
Example in CODEPEN
这篇关于HTML 100％高度，具有多个内联滚动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
