代码之家 › 专栏 › 技术社区 › letsCode

有3列的粘性页眉/页脚。在列中滚动的div

css

letsCode · 技术社区 · 6 年前

我这里有一把JS小提琴。

基本上,我想做一个有粘性页眉和页脚的用户界面。中间的内容将有三列。每个列中都有div。这些div应该有100%的高度,不能从页脚上剪掉。在div中,它们将有可滚动的div。

我创建的最基本的布局中有这个…

d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>this is the end!!

它说这是结束的部分!!从未到达。

2 回复 | 直到 6 年前

Paulie_D 6 年前

你可以使用flexbox 没有计算高度的需要;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 ::before,
 ::after {
  box-sizing: inherit;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header {
  height: 75px;
  background: red;
}

main {
  flex: 1;
  background: lightgreen;
  display: flex;
}

.scrolly {
  flex: 1 0 33%;
  overflow-y: auto;
}

.content {
  height: 1000px;
}

footer {
  height: 50px;
  background: blue;
}

<header></header>
<main>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
  <div class="scrolly">
    <div class="content"></div>
  </div>
  </div>
</main>
<footer></footer>

IvanS95 6 年前

注:见全屏小提琴

您可以尝试使用flexbox而不是定义每个单元,计算高度以避免使用页脚所在的空间,并让子div继承其高度

<style>
body, head {overflow: hidden;}
#header,#footer,#content { position:absolute; right:0;left:0;}

#header{
   height:100px; top:0; background: #4A4A4A;

}
#footer{
  height:100px; bottom:0; background: #4A4A4A;
}
#content{
  top:100px;
  height: calc(100% - 100px);
  background:#fff;
  display: flex;
  align-items: stretch;
}

</style>

<div>
<div id="header">HEADER</div>
<div id="content">
  

      <div style="background-color: #ff0000; min-width: 33%; height: inherit; overflow-y: scroll;">
        <div style="background-color: blue;min-height: inherit;max-width: 99%;padding: 20px 40px;">
          <div style="overflow: auto; max-height: inherit; padding: 10px;">
    			<br>d<br>d<br>d<br>d<br>d<br>d<br>d
				<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br><br>d<br>d<br>d<br>d<br>
                d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>d<br>
                d<br>d<br>d
                <br>d<br>this is the end!!
          </div>
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: red;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          middle
        </div>
      </div>

      <div style="background-color: #ff0000; min-height: 100%; min-width: 33%; max-width: 33%;float: left;">
        <div style="background-color: pink;min-height: 100%;max-width: 99%;padding: 20px 40px;">
          right
        </div>
      </div>
     
</div>
<div id="footer">FOOTER</div>
</div>