html - 当我们从另一个页面重定向到它时,页面没有顶部对齐

标签 html css redirect

当我点击一个按钮重定向到一个新页面时,新页面不在顶部位置。我必须向下滚动才能看到。请看下面的图片。 enter image description here

标题为“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/

相关文章:

javascript - 无法为输入字段设置掩码

javascript - 如何将表行传递到包含所有输入元素的隐藏表单?

html - 一个 div 在另一个 div 中的垂直对齐不起作用

javascript - 将行附加到网格

html - 使一行带有边框和边距的 div 动态填充宽度

php - 以 seo 友好的方式重写 htaccess 中的复杂 url

java - 点击提交后重定向

html - Bootstrap div 左右浮动

CSS 径向渐变在 Mozilla 中不起作用

java - 为什么 Spring Web/MVC 不将我的模型属性添加到我的重定向 View 的 URL 中?