html - CSS HTML 内容适合区域之间的高度

Question

我正在为手机制作响应式网站。 HTML 不应更改，但 css 应处理元素的定位，以免影响主站点。

背景信息

桌面版网站在屏幕底部设置了一个导航栏，下方有一个联系电话，而网站标题和 Logo 位于顶部。对于移动设备，这是不可行的，所以我将导航栏放在屏幕顶部，旁边是标题和 Logo 。该数字已按要求保留在底部。在顶部标题和底部的联系电话之间，我放置了批量内容区域。通过使用 height:calc(100% - 336px) 属性将内容包装器设置为 100% - 顶部标题的总高度和联系电话号码，可以正确显示内容。然后将内容包装器绝对设置为位置 top: 176px 以满足顶部标题的底部。内容包装器内的内容不适合包装器，因此 overflow-y:scroll 用于确保用户可以滚动浏览内容区域。

问题

包装内的内容区域不滚动。

代码

CSS

.PageContentBox {
      top: 176px!important;
      height: calc(100% - 336px);
      z-index: 12;
      width: 100%;
      overflow-y: scroll;
      left: 0px!important;
 }
 #content {
      padding: 0;
      height: 100%;
      overflow-y: scroll; /*This here for testing purposes*/
 }

HTML

<div class="PageContentBox">
    <div id="content">
        <div id="pages">
            <div class="page" id="page0">
                <h1>HEADER</h1>
                <div class="grid grid-pad" style="padding: 0 0 0 0!important">
                     <div class="row" id="r1">
                          <div class="col-5-12">
                               <div class="content">
                                     <img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
                               </div>
                          </div>
                          <div class="col-7-12">
                                <div class="content">
                                     <h2>Applications</h2>
                                     <p class="MegaServicesText">
                                                DUMMY TEXT
                                      </p>
                                </div>
                           </div>
                     </div>
                     <div class="row" id="r2">
                            <div class="col-5-12">
                                 <div class="content">
                                      <img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
                                  </div>
                            </div>
                            <div class="col-7-12">
                                 <div class="content">
                                      <h2>Performance</h2>
                                      <p class="MegaServicesText">
                                                DUMMY TEXT
                                      </p>
                                 </div>
                             </div>
                         </div>
                         <div class="row" id="r3">
                              <div class="col-5-12">
                                   <div class="content">
                                        <img class="megaServiceImage" src="../template/img/gallery/mega/test.jpg" alt="??????" />
                                   </div>
                              </div>
                              <div class="col-7-12">
                                   <div class="content">
                                         <h2>Specifications</h2>
                                          <p class="MegaServicesText">
                                                DUMMY TEXT
                                          </p>
                                    </div>
                               </div>
                           </div>             
                       </div>
                  </div>
              </div>                  
        </div>
     </div>

Answer 1

您需要在 .PageContentBox 上设置 position:top: 和 z-index 不起作用，除非您定义 位置。

Here is you updated Fiddle位置设置为绝对位置。