Question

出于某种原因，我的导航栏和页脚混乱了。我不希望用户必须向下滚动，我希望所有内容都适合一页。出于某种原因，页脚和图像正在拧紧它。但最大的问题是我的主要内容不是在页面中间，而是在导航栏后面。

这是CSS和HTML，以及我的网站。你们有没有看到任何问题？

＆＃13;

<html>
<head>
  <title>Ry Can Fix It!</title>
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
  <link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
  <link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
  <link rel="manifest" href="/favicons/manifest.json">
  <link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#5bbad5">
  <link rel="shortcut icon" href="/favicons/favicon.ico">
  <meta name="msapplication-config" content="/favicons/browserconfig.xml">
  <meta name="theme-color" content="#ffffff">
</head>

<body>

  <div id="page">
    <header>
      <div>
        <a href="/">
          <img width='15%' style='margin-top: 5px;' src="Logo.png" border=0>
        </a>
      </div>

      <nav>
        <a href="index.html" class='active'>Home</a>
        <a href="#">FAQ's</a>
      </nav>
    </header>

    <div id="main">

      <div class="mycontainer">
        <div class="title">Hey!</div>

        <div class="content">Why?</div>
      </div>

    </div>

    <div id="footer">
      <center>
        <img width='10%' src='footerLogo.png'>And why is this logo not moving up?</center>
    </div>

  </div>
</body>
</html>

＆＃13;

{{1}}

＆＃13;

Answer 1

将以下行overflow:hidden添加到#main div

#main {
    width: 1300px;
    margin-left: auto;
    margin-right: auto;
    min-height: 90%;
    height: auto;
    height: 89%;
    margin: 0 auto -50px;
    vertical-align: bottom;
    overflow: hidden;
}

Answer 2

包含两种样式，因为您遇到此问题：

1.您已为页脚设置height:35px;，因此无法查看页脚。所以评论height:35px;。

2. 导航的位置设置为绝对。这不是必要的。评论它。

我的导航栏和页脚发生了什么

2 个答案: