Question

我早上大部分时间都在阅读，我尝试过的修补程序似乎没有产生任何不同的结果，而是我遇到的问题。而不是基于保存页面数据的主div的内容动态扩展页面，div只是在页脚部分后面消失。

这是HTML布局

<div id="fp_wrapper">
  <div id="fp_top_bar">
    <!-- content here -->
  </div>
  <div id="fp_marquee">
    <div id="fp_logo_wrapper_a">
      <!-- content here -->
    </div>
    <div id="fp_logo_wrapper_b">
      <!-- content here -->
    </div>
    <div id="fp_page_content">
      <!-- This is the DIV that is not forcing the expansion of the page
           It just expands below the social bar and footer below
      -->
    </div>
  </div>
</div>
<div id="fp_social_bar">
  <!-- content here -->
</div>
<div id="fp_footer">
  <!-- content here -->
  <span id="fp_footer_copyright"></span>
</div>

这是CSS。从我已经准备好看起来浮动DIV可能导致这个问题似乎是一个问题，但是我已经尝试了添加清除的每个组合：两者都用于多个不同的div，甚至尝试过：before和：在psuedo类之后。

html, body{height:100%;margin:0;font-family:Arial, Verdana Helvetica, sans-serif;background-color:#000;background:url("/images/bgrnd_landing3.jpg") no-repeat center center fixed;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}

#fp_wrapper{height:100%;margin-left:auto;margin-right:auto;margin-bottom:-78px;background:rgba(0, 0, 0, 0.5);behavior:url("https://domain-omitted/css/pie/PIE.htc");overflow:hidden;overflow-x:hidden;}

#fp_top_bar{clear:both;height:40px;margin:auto;padding-top:5px;padding-right:10px;font-family:inherit;font-size:16px;color:#fff;text-align:right;}
#fp_top_bar a, #fp_top_bar a:hover, #fp_top_bar a:visited, #fp_top_bar a:active{text-decoration:none;color:#fff;padding-right:10px}
#fp_top_bar a:hover{color:#1468b3}
#fp_top_bar img{vertical-align:middle;}

#fp_marquee{clear:both;width:100%;height:auto;font-family:inherit;text-align:left;overflow:hidden;overflow-x:hidden;padding-left:25px}

#fp_logo_wrapper_a{float:left;height:150px;width:48%;overflow:hidden;overflow-x:hidden;color:#fff;}
#fp_logo_wrapper_b{float:right;height:150px;width:48%;overflow:hidden;overflow-x:hidden;color:#fff;}

#fp_page_content{clear:both;height:auto;width:75%;margin:auto;font-family:inherit;background:rgba(20, 104, 179, 0.4);border:2px solid #fff;color:#fff;padding-left:10px;overflow-x:hidden;overflow-y:hidden;padding-top:10px;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;behavior:url("https://domain-omitted/css/pie/PIE.htc");}

#fp_social_bar{clear:both;height:48px;}
#fp_social_bar img{padding-right:10px;opacity:0.8;filter:alpha(opacity=80);}
#fp_social_bar img:hover{opacity:1.0;filter:alpha(opacity=100);}

#fp_footer{clear:both;font-family:inherit;font-size:11px;height:30px;line-height:30px;margin:auto;background:rgba(0, 0, 0, 0.8);color:#fff;text-align:middle;}
#fp_footer a, #fp_footer a:hover, #fp_footer a:visited, #fp_footer a:active{text-decoration:none;color:#fff;padding-left:10px}
#fp_footer a:hover{color:#1468b3}

#fp_footer_copyright{float:right;padding-right:10px;

编辑：这是一个JSFiddle

JSfiddle

更新 Zack的帮助下面添加了我想要的滚动条，但它并没有按照我想要的方式自动扩展DIV。应将页脚向下推到内容下方，而不是留在原位并将内容向后滚动。

Answer 1

问题是由margin-bottom: -78px选择器中的#fp-wrapper造成的。

我对JsFiddle

进行了一些更新

删除包装器上的overflow: hidden;并将其设置为页脚div：

position:fixed;
bottom: 0;
width: 100%;

CSS Multi DIV布局不会垂直扩展

1 个答案: