Question

我正在尝试实现此布局：

页面宽1200像素，居中
页面填充浏览器高度的100％
页面无法滚动
绿色和红色div应该使用内联滚动
每当标题（橄榄色，蓝色，黄色，橙色）变高时，绿色和红色仍应填满页面但不能更多

我已经尝试了一段时间，但我不知道如何使绿色（和红色）部分占据页面的其余部分。我不想使用绝对定位，因为我需要页面来响应标题的动态大小。另外，如果可能，我真的不想使用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实现该布局的任何想法？

谢谢！

Answer 1

使用flexbox模型可以让您的设计更轻松。看这里：

＆＃13;

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);
}

＆＃13;

<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>

＆＃13;

CODEPEN

中的示例

HTML 100％高度，具有多个内联滚动div

1 个答案: