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

Question

嗨，我一直有编码布局的问题我希望我的侧边栏保持不变，无论屏幕大小，但我也需要我的内容区域流畅。标题保持在顶部，这就是我想要的问题是页脚我需要它始终保持在底部和内容区域的整个宽度。如果有人可以帮助它将非常感激。

这是我的代码。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用inline-block而不是float:left以避免clear出现问题，但使用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;替换为display: table-cell;和#left选择器的#right。
• 然后，对display: table;选择器使用#content。
• 然后，移除width: 80%;和#right选择器的#right footer
• 将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>

另见this Fiddle。