动态内容高度无垂直边框 [英] Dynamic content height without vertical border

查看：116
本文介绍了动态内容高度无垂直边框的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

几个小时后，我能够创建一个具有固定标题，动态内容高度和页脚始终在（屏幕）底部的布局。以下是代码： https://jsfiddle.net/r56oqg41/ 



  html {height：100％;} body {margin：0; padding：0;高度：100％; background：#DEDEDE;}＃main {display：flex; min-height：100％; flex-direction：column;}＃head {width：100％; height：40px; border-bottom：1px solid＃115293; background-color：＃1976D2;}＃head #head_content {width：600px; padding：6px; color：#FFFFFF; margin：0 auto; text-align：center;}＃body {flex：1; width：600px; margin：0 auto; background-color：#FFFFFF; border-left：1px solid #BFBFBF; border-right：1px solid #BFBFBF;}＃body #menu {float：left; width：150px; padding：10px; background-color：＃94C9FF; border-right：1px solid #BFBFBF;}＃body #page {overflow：hidden; padding：10px;颜色：＃5C5C5C;}＃foot {width：100％; height：40px; color：#FFFFFF; border-top：1px solid＃115293; background-color：＃1976D2;}＃foot #foot_content {width：600px; padding：6px; margin：0 auto; text-align：center;}  

 < div id = main> < div id =head> < div id =head_content> HEADER< / div> < / div> < div id =body> < div id =menu> MENU< / div> < div id =page> < p> PAGE CONTENT 01< / p> < p> PAGE CONTENT 02< / p> < p> PAGE CONTENT 03< / p> < p> PAGE CONTENT 04< / p> < p> PAGE CONTENT 05< / p> < p> PAGE CONTENT 06< / p> < p> PAGE CONTENT 07< / p> < p> PAGE CONTENT 08< / p> <！< p> PAGE CONTENT 09< / p> < p> PAGE CONTENT 10< / p> < p> PAGE CONTENT 11< / p> < p> PAGE CONTENT 12< / p> < p> PAGE CONTENT 13< / p> < p> PAGE CONTENT 14< / p> < p> PAGE CONTENT 15< / p> < p> PAGE CONTENT 16< / p> < p> PAGE CONTENT 17< / p> < p> PAGE CONTENT 18< / p> < p> PAGE CONTENT 19< / p> < p> PAGE CONTENT 20< / p>  - > < / div> < / div> < div id =foot> < div id =foot_content> FOOTER< / div> < / div>< / div>



当没有内容时，菜单的垂直边框（或 #page ）保持隐藏...



我不想让页脚总是固定在底部。



另一个问题是此解决方案在IE11（也许所有以下版本）中不起作用：（


h2_lin>解决方案

  body {margin：0; padding：0; background：#DEDEDE;}＃main {display：flex; flex-direction：column; min-height：100vh;}＃head {height：40px; border-bottom：1px solid＃115293; background-color：＃1976D2;}＃head #head_content {width：600px ; padding：6px; color：#FFFFFF; margin：0 auto; text-align：center;}＃body {flex：1; width：600px; margin：0 auto; background-color：#FFFFFF; border-left：1px固体#BFBFBF; border-right：1px solid #BFBFBF; display：flex;}＃body #menu {width：150px; padding：10px; background-color：＃94C9FF; border-right：1px solid #BFBFBF;}＃body #page {padding：10px;颜色：＃5C5C5C;}＃foot {width：100％; height：40px; color：#FFFFFF; border-top：1px solid＃115293; background-color：＃1976D2;}＃foot #foot_content {width：600px; padding：6px; margin：0 auto; text-align：center;}  

 < div id = main> < div id =head> < div id =head_content> HEADER< / div> < / div> < div id =body> < div id =menu> MENU< / div> < div id =page> < p> PAGE CONTENT 01< / p> < p> PAGE CONTENT 02< / p> < p> PAGE CONTENT 03< / p> < p> PAGE CONTENT 04< / p> < p> PAGE CONTENT 05< / p> < p> PAGE CONTENT 06< / p> < p> PAGE CONTENT 07< / p> < p> PAGE CONTENT 08< / p> < p> PAGE CONTENT 09< / p> < p> PAGE CONTENT 10< / p> < p> PAGE CONTENT 11< / p> < p> PAGE CONTENT 12< / p> < p> PAGE CONTENT 13< / p> < p> PAGE CONTENT 14< / p> < p> PAGE CONTENT 15< / p> < p> PAGE CONTENT 16< / p> < p> PAGE CONTENT 17< / p> < p> PAGE CONTENT 18< / p> < p> PAGE CONTENT 19< / p> < p> PAGE CONTENT 20< / p> < / div> < / div> < div id =foot> < div id =foot_content> FOOTER< / div> < / div>< / div>



jsFiddle



对于IE11支持，请参阅此帖子： flex属性在IE11中无法使用


After several hours I was able to create a layout with a fixed header, a dynamic content height and the footer always in the (screen) bottom. Here is the code: https://jsfiddle.net/r56oqg41/

html {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #DEDEDE;
}
#main {
  display: flex;
  min-height: 100%;
  flex-direction: column;
}
#head {
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #115293;
  background-color: #1976D2;
}
#head #head_content {
  width: 600px;
  padding: 6px;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
}
#body {
  flex: 1;
  width: 600px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
}
#body #menu {
  float: left;
  width: 150px;
  padding: 10px;
  background-color: #94C9FF;
  border-right: 1px solid #BFBFBF;
}
#body #page {
  overflow: hidden;
  padding: 10px;
  color: #5C5C5C;
}
#foot {
  width: 100%;
  height: 40px;
  color: #FFFFFF;
  border-top: 1px solid #115293;
  background-color: #1976D2;
}
#foot #foot_content {
  width: 600px;
  padding: 6px;
  margin: 0 auto;
  text-align: center;
}

<div id="main">
  <div id="head">
    <div id="head_content">
      HEADER
    </div>
  </div>
  <div id="body">
    <div id="menu">
      MENU
    </div>
    <div id="page">
      <p>PAGE CONTENT 01</p>
      <p>PAGE CONTENT 02</p>
      <p>PAGE CONTENT 03</p>
      <p>PAGE CONTENT 04</p>
      <p>PAGE CONTENT 05</p>
      <p>PAGE CONTENT 06</p>
      <p>PAGE CONTENT 07</p>
      <p>PAGE CONTENT 08</p>
      <!--
                <p>PAGE CONTENT 09</p>
                <p>PAGE CONTENT 10</p>
                <p>PAGE CONTENT 11</p>
                <p>PAGE CONTENT 12</p>
                <p>PAGE CONTENT 13</p>
                <p>PAGE CONTENT 14</p>
                <p>PAGE CONTENT 15</p>
                <p>PAGE CONTENT 16</p>
                <p>PAGE CONTENT 17</p>
                <p>PAGE CONTENT 18</p>
                <p>PAGE CONTENT 19</p>
                <p>PAGE CONTENT 20</p>
-->
    </div>
  </div>
  <div id="foot">
    <div id="foot_content">
      FOOTER
    </div>
  </div>
</div>

The problem is the vertical border of the menu (or the #page) stays hidden when there is no content...

I do not want the footer to be always fixed in the bottom. It will depends on the page content.

Another problem is this solution does not work in IE11 (and maybe all below versions) :(

Please, is there a way to always show the vertical border?

Thanks!

解决方案 

body {
  margin: 0;
  padding: 0;
  background: #DEDEDE;
}
#main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
#head {
  height: 40px;
  border-bottom: 1px solid #115293;
  background-color: #1976D2;
}
#head #head_content {
  width: 600px;
  padding: 6px;
  color: #FFFFFF;
  margin: 0 auto;
  text-align: center;
}
#body {
  flex: 1;
  width: 600px;
  margin: 0 auto;
  background-color: #FFFFFF;
  border-left: 1px solid #BFBFBF;
  border-right: 1px solid #BFBFBF;
  display: flex;
}
#body #menu {
  width: 150px;
  padding: 10px;
  background-color: #94C9FF;
  border-right: 1px solid #BFBFBF;
}
#body #page {
  padding: 10px;
  color: #5C5C5C;
}
#foot {
  width: 100%;
  height: 40px;
  color: #FFFFFF;
  border-top: 1px solid #115293;
  background-color: #1976D2;
}
#foot #foot_content {
  width: 600px;
  padding: 6px;
  margin: 0 auto;
  text-align: center;
}

<div id="main">
  <div id="head">
    <div id="head_content">HEADER</div>
  </div>
  <div id="body">
    <div id="menu">MENU</div>
    <div id="page">
      <p>PAGE CONTENT 01</p>
      <p>PAGE CONTENT 02</p>
      <p>PAGE CONTENT 03</p>
      <p>PAGE CONTENT 04</p>
      <p>PAGE CONTENT 05</p>
      <p>PAGE CONTENT 06</p>
      <p>PAGE CONTENT 07</p>
      <p>PAGE CONTENT 08</p>
      <p>PAGE CONTENT 09</p>
      <p>PAGE CONTENT 10</p>
      <p>PAGE CONTENT 11</p>
      <p>PAGE CONTENT 12</p>
      <p>PAGE CONTENT 13</p>
      <p>PAGE CONTENT 14</p>
      <p>PAGE CONTENT 15</p>
      <p>PAGE CONTENT 16</p>
      <p>PAGE CONTENT 17</p>
      <p>PAGE CONTENT 18</p>
      <p>PAGE CONTENT 19</p>
      <p>PAGE CONTENT 20</p>
    </div>
  </div>
  <div id="foot">
    <div id="foot_content">FOOTER</div>
  </div>
</div>

jsFiddle

For IE11 support, see this post: flex property not working in IE11

这篇关于动态内容高度无垂直边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆