当我点击一个按钮重定向到一个新页面时,新页面不在顶部位置。我必须向下滚动才能看到。请看下面的图片。
标题为“LIST”的页面是我要重定向到的页面。
我重定向到的页面的 HTML 是
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Some Title</title>
<link href="css/style.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.mobileMenu').click(function(){
$("#mobileNav").toggle();
});
$("#mobileNav li").click(function(){
$('#mobileNav').hide();
});
});
</script>
</head>
<body>
<div id="innerheader">
<div class="innerwrapper">
<h1 id="someId" onClick="location.href='index.html'"></h1>
<div class="mobileMenu"></div>
<div id="mainNav">
<ul>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</div>
<div id="mobileNav">
<ul>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="index.html#xxx">xxx</a></li>
<li><a href="#">xxx</a></li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
<div id="priceList">
<h4>List</h4>
<div class="innerwrapper">
<div class="leftsection">
<div class="listSec">
<h5>ABC</h5>
<ul>
<li>
<p>A</p>
<span>70</span>
<div class="clear"></div>
</li>
<li>
<p>B)</p>
<span>300</span>
<div class="clear"></div>
</li>
<li>
<p>C</p>
<span>100/150/200</span>
<div class="clear"></div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS
.innerwrapper {
width:1140px;
height:700px !important;
margin:0 auto;
position:relative;
z-index:99999
}
#priceList{
background:#fff;
padding-bottom:80px;
}
#priceList h4{
font-size:24px;
color:#37444d;
line-height:65px;
font-weight:300;
text-align:center;
text-transform:uppercase;
border-bottom:solid 1px #f0f0f0;
border-top:solid 1px #f0f0f0;
}
如果我从上面的类中删除高度,它工作正常。
最佳答案
#priceList
div 被下推的原因是因为您的 div innerwrapper
设置了 height: 700px
,这会下推它下面的内容(即价格表)向下 700 像素。
编辑:
要解决此问题,您需要删除/更改 innerwrapper
上的 height: 700px !important
。
如果 innerwrapper
的高度为 700 像素对您的设计至关重要,您有两种选择。绝对定位您的价目表并将其准确放置在您想要的位置或者您可以将价目表移动到 innerWrapper 中。
关于html - 当我们从另一个页面重定向到它时,页面没有顶部对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29667861/