静态侧边栏和带有页眉和页脚的流体内容

Question

嗨，我在编写布局时遇到了问题，我想让我的侧边栏保持不变，无论屏幕尺寸如何，但我还需要我的内容区域是流畅的。页眉保持在顶部，这就是我想要的问题是页脚，我需要它始终保持在内容区域的底部和整个宽度。如果有人能帮忙，将不胜感激。

这是我的代码。

html, body { 
    height: 100%; 
    margin: 0;
}   
#content { 
    width: 100%; 
    height: 100%;
}   
#left { 
    width: 20%; 
    height: 100%; 
    float: left; 
    background-color: red; 
}   
#right { 
    float: left; 
    width: 80%; 
    height: 100%;  
    background-color: green;
} 
#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}
#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    width: 80%;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>	
        <footer>FOOTER</footer>
    </div>
</div>

Answer 1

inline-block 而不是 float:left 以避免clear ings出现问题，但在使用inline-block时，最好使用 vh 而不是 % 来填充视口。

要有一个固定的侧边栏，只需给它一个固定的width并使用calc来计算剩余空间。

你可以做这样的事情：

片段

html,
body {
  height: 100vh;
  margin: 0;
}
#content {
  width: 100vw;
  font-size: 0; /* fix inline-block gap */ 
}
#content > div {
  font-size: 16px; /* revert font-size 0 */
}
#left {
  width: 150px;
  height: 100vh;
  display: inline-block;
  vertical-align: top;
  background-color: red;
}
#right {
  display: inline-block;
  width: calc(100vw - 150px);
  height: 100vh;
  background: green
}
#right header {
  background: blue;
  text-align: center;
  color: white;
  padding: 20px;
}
#right footer {
  background: brown;
  text-align: center;
  color: white;
  position: absolute;
  bottom: 0;
  width: calc(100vw - 150px);
}

<div id='content'>
  <div id='left'>Testing</div>
  <div id='right'>
    <header>TITLE</header>
    <div class="content">
      <p>lorem ipsum and the like.</p>
    </div>
    <footer>FOOTER</footer>
  </div>
</div>

Answer 2

这是你应该做的：

• 首先，将float:left;替换为#left和#right选择器的display: table-cell;。
• 然后，将display: table;用于#content选择器。
• 然后，删除#right和#right footer选择器的width: 80%;
• 将right : 0;添加到#right footer选择器
• 最后，将页脚的left和侧边栏的width设置为相同的固定值，然后您就在那里。

这种方法的美妙之处在于，它也适用于IE8和其他不支持calc()的浏览器。

演示 ：

html, body { 
    height: 100%; 
    margin: 0;
}   
#content { 
    width: 100%; 
    height: 100%;
    display: table;
}   
#left { 
    width: 100px;
    height: 100%; 
    display: table-cell;
    background-color: red; 
}   
#right { 
    display: table-cell;
    height: 100%;  
    background-color: green;
} 
#right header { 
    background: blue;
    text-align: center;
    color: white;
    padding: 20px;
}
#right footer {
    background: brown;
    text-align: center;
    color: white;
    position: absolute;
    bottom: 0;
    right : 0;
    left : 100px;
}

<div id='content'>   
    <div id='left'>Testing</div>   
    <div id='right'>
        <header>TITLE</header>
        <div class="content">
            <p>lorem ipsum and the like.</p>
        </div>	
        <footer>FOOTER</footer>
    </div>
</div>

另请参阅此小提琴。