HTML 100％高度与多个在线滚动的div

页是1200像素宽和中心
页填满浏览器的高度的100％
页面不不滚动
绿色和红色div应该内嵌滚动而不是
只要标题（橄榄色，蓝色，黄色，橙色）变得更高，绿色和红色仍然应该f虐待页面，但不是更多

我一直在尝试一段时间，但我不知道如何使绿色（和红色）部分采取页面大小的其余部分。我不想使用绝对定位，因为我需要页面对标题的动态大小作出反应。另外，如果可能的话，我真的不想使用Javascript。

这里是我到目前为止有：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>

关于我如何能使用纯HTML实现这一布局的任何想法/ CSS ？

谢谢！

来源

2016-04-21 Davide De Santis

我知道这个问题是不是使用引导程序，但是....使用自助将使这（和你的生活）100％更好。它会为你处理所有这些东西，并使你的页面响应。 –

给标题一个高度百分比和内容其余的高度百分比？喜欢20％和80％？里面100％div – Nomistake

看看：http://stackoverflow.com/questions/1575141/make-div-100-height-of-browser-window –

使用flexbox模型使您的设计更加简单。看看这里：

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>

实例CODEPEN

来源

2016-04-21 14:26:47

你的回答帮助我用flex创建了一个布局，谢谢你。但是，有一件事情不起作用，无论是我的版本还是与您的版本无关：当main> div中的文本长于框时，我希望该框进行内联滚动。然而，目前，它只是让main> div更高并且消失（因为body-> overflow：hidden）进入深渊。有什么方法可以将div的最大高度固定为flex的全部增长？ –

那么出现问题了。看我的codepen显示我内联滚动内部的主> div块。我为答案添加了屏幕截图，以便您可以在左侧主div> div上看到内联scoller。我也在这里更新源代码，因为你不需要隐藏体溢出。 –

这真的很奇怪...我刚刚在Edge，Internet Explorer 11和Firefox中打开了您的codepen，但它不起作用。你正在使用哪种浏览器？你的代码是最新的吗？ –

HTML 100％高度与多个在线滚动的div

回答

相关问题