代码和老师的一样但是container-scroll加了absolute后下面的版面就没了找不到原因

来源：11-9 首页细节调整&首页的Vue数据绑定

慕雪0323865

2017-04-14

<!DOCTYPE html>

<html>

<head>

</head>

<body>

.container-warp{

height: 100%;

overflow: hidden;

position: relative;

}

.container-scroll{

position:absolute;

top:45px;

bottom: 0px;

left:0px;

right: 0px;

overflow-y:scroll;

}

</style>

<% include include/header.html %>

<% include include/index-top.html %>

<% include include/index-hot.html %>

<% include include/index-recommend.html %>

<% include include/index-female.html %>

<% include include/index-male.html %>

<% include include/index-free.html %>

<% include include/index-bottom.html %>

</div>

</body>

</html>

写回答

2回答

远人

2017-04-14

container-scroll 加 absolute 会让这部分布局脱离流式定位，不在占据空间，下面的部分就会跑到最顶部被遮挡

月下临帖

按照你视频敲的为什么你写的没有被遮挡啊？我写漏了什么嘛？

2017-05-17

共2条回复

WebTeacher

2017-04-14

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no">
<link rel="stylesheet" type="text/css" href="/static/css/all.css">
<link rel="stylesheet" type="text/css" href="/static/css/reset.css">
<title>书城首页</title>

</head>
<body>
<style type="text/css">
.container-warp{
height: 100%;
overflow: hidden;
position: relative;
}
.container-scroll{
position:absolute;
top:45px;
bottom: 0px;
left:0px;
right: 0px;
overflow-y:scroll; 
}
</style>
<div id="root" style="width: 734px">
<div class="container-warp">
<% include include/header.html %>

<div class="container-scroll">
<% include include/index-top.html %>
<% include include/index-hot.html %>
<% include include/index-recommend.html %>
<% include include/index-female.html %>
<% include include/index-male.html %>
<% include include/index-free.html %>
<% include include/index-bottom.html %>
</div>
</div>
</div>
<script src="/static/script/pages/index.js"></script>
<script src="/static/script/vue.js"></script>
<script src="/static/script/zepto.js"></script>
</body>
</html>

HTML5独立开发书城Web App

最前沿前端技术精讲， HTML5 、Vue.js 、Koa 、zepto 综合运用

3387 学习 · 685 问题

查看课程

相似问题

老师，我的代码也是data undefined，实在找不到问题出在哪里了。。

回答 7

获取到数据并解码后渲染不出来并报zepto错误

回答 3

能不能把略过的代码发给我们

回答 4

js 写完完全没效果，连 alert 都没用

回答 2

出不来效果，请问是怎么回事

回答 3

打开慕课网App查看更多内容