I am making a responsive site for a mobile. The HTML should not be changed but the css should handle the positioning of the elements so as to not effect the main site.
我正在为移动设备制作响应式网站。不应更改HTML,但css应处理元素的定位,以免影响主站点。
BACKGROUND INFORMATION
The desktop site has a navigation bar set at the bottom of the screen with a contact number below it whilst the site title and logo is placed at the top. For the mobile this is unfeasable so I've put the navigation bar at the top of the screen alongside the title and logo. The number has remained at the bottom as desired. Between the top header and the contact number at the bottom, I have placed the bulk content area. The content is being displayed correctly by using the height:calc(100% - 336px) property to set the content wrapper 100% - the total height of the top header and the contact number. The content wrapper is then set absolute to a position top: 176px to meet the bottom of the top header. The content inside the content wrapper does not fit inside the wrapper so overflow-y:scroll is used to ensure that the user can scroll through the content area.
桌面站点的屏幕底部有一个导航栏,其下方有一个联系号码,而站点标题和徽标位于顶部。对于移动设备来说这是不可行的,所以我将导航栏放在屏幕顶部的标题和徽标旁边。这个数字根据需要保持在最低点。在顶部标题和底部的联系号码之间,我放置了批量内容区域。通过使用height:calc(100% - 336px)属性正确显示内容,以将内容包装器设置为100% - 顶部标题的总高度和联系人编号。然后将内容包装器设置为绝对位置top:176px以满足顶部标题的底部。内容包装器内的内容不适合包装器内部,因此overflow-y:scroll用于确保用户可以滚动内容区域。
PROBLEM
The content area within the wrapper is not scrolling.
包装器中的内容区域不滚动。
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>
2 个解决方案
#1
1
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
您需要在.PageContentBox上设置位置:top:和z-index不起作用,除非您定义位置。
Here is you updated Fiddle with the position set to absolute.
这是你更新Fiddle的位置设置为绝对。
#2
0
In your question you save already given the solution just use that only. You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css. css should be like this:
在您的问题中,您已经保存,因为解决方案只是使用它。您已指定绝对但未在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;
}
查看示例
I am getting desktop and mobile view like this and I think its fine. What you say? 
我正在获得这样的桌面和移动视图,我觉得很好。你说的话?
#1
1
You need to set position on your .PageContentBox: top: and z-index don't work unless you define position.
您需要在.PageContentBox上设置位置:top:和z-index不起作用,除非您定义位置。
Here is you updated Fiddle with the position set to absolute.
这是你更新Fiddle的位置设置为绝对。
#2
0
In your question you save already given the solution just use that only. You have specified that absolute but not used it in css. Just use it and it will work no need to put the #content css. css should be like this:
在您的问题中,您已经保存,因为解决方案只是使用它。您已指定绝对但未在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;
}
查看示例
I am getting desktop and mobile view like this and I think its fine. What you say?
我正在获得这样的桌面和移动视图,我觉得很好。你说的话?