Question

我正在为移动设备制作自适应网站。不应更改HTML，但css应处理元素的定位，以免影响主站点。

背景信息

桌面网站的屏幕底部有一个导航栏，其下方有一个联系号码，而站点标题和徽标位于顶部。对于移动设备来说，这是不可行的，所以我将导航栏放在屏幕顶部的标题和徽标旁边。这个数字根据需要保持在最低点。在顶部标题和底部的联系号码之间，我放置了批量内容区域。正确显示内容，方法是使用height:calc(100% - 336px)属性将内容包装器设置为100％ - 顶部标题的总高度和联系人号码。然后将内容包装器设置为绝对位置top：176px以满足顶部标题的底部。内容包装器内的内容不适合包装器，因此overflow-y:scroll用于确保用户可以滚动内容区域。

问题

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

CODE

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除非您定义position，否则无法工作。

位置设置为绝对值的

Here is you updated Fiddle。

Answer 2

在你的问题中，你已经保存了解决方案只是使用它。您已指定绝对但未在css中使用它。只需使用它就可以了，不需要放#content css。 css应该是这样的：

.PageContentBox {
      position: absolute;
      top: 176px!important;
      height: calc(100% - 336px);
      z-index: 12;
      width: 100%;
      overflow-y: scroll;
      left: 0px!important;
}

See the example

我正在获得这样的桌面和移动视图，我觉得很好。你说的话？ enter image description here

enter image description here

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

2 个答案: