Question

我正在使用Dreamweaver CC 2014创建网站。主页滚动正常，但关于页面和日历页面根本不滚动并切断应显示的下半部分。我已经阅读了其他说添加溢出的线程：滚动代码到CSS。我已经这样做了，但它仍然无法工作，我想知道我是否将代码放在了错误的位置？

以下是“日历”页面的链接： http://normajdougherty.com/Calendar.html

您是否会查看CSS和HTML代码并告诉我这是什么问题？非常感谢。

Answer 1

你有

position:fixed;

在导航栏中指定，有效地锁定＆＃34;页面到位。如果您将其位置设置为相对位置，则您的菜单项（也不应设置为＆＃34;已修复＆＃34;）将不再附加到导航栏。

但是你首先实现导航栏的方式有点像kludgy。你不需要为背景中的蓝色条形单独的div。

使用＆＃34;背景颜色＆＃34;而不是有两个重叠的固定div，这是一个不好的做法，有几个原因，只需将导航按钮放在一个带有背景颜色的div中。属性。

此外，它看起来＆＃34;切断＆＃34;中途是因为这只是您在后台使用的图像的大小。考虑设置颜色渐变或其他东西，或者老实说只留下纯色。除非你做一些特别喜欢的事情，否则像这样的大静态图像看起来不会像你想要的那样。

编辑：好的，乍一看，您的整个页面都显示在导航栏div中。这就是为什么当＆＃34; position：fixed＆＃34;已设定。确保在页面内容的其余部分开始之前关闭导航栏的标记。

但是，你仍然不应该在页面中间有一个固定的导航栏，因为它会向下滚动你的其他内容，结果看起来非常糟糕。

Answer 2

这是因为你设置了

 positon:fixed;

在navbar类中。删除它，页面将正常工作

删除

position:fixed

来自calendar.css中的.navbar类

Answer 3

您遇到此问题，因为您网页的内容部分已包含在已分配navbar位置的fixed div中。您需要在intro div之后添加<iframe> div和navbar，以使您的网站正常运行。

这就是您网站上当前代码的特定部分（通知<div class="intro">而<iframe>位于<div class="fluid navbar">内）：

<div class="fluid navbar">
    <img src="images/BlueNavBar.png" alt="navigation menu">
    <div id="menu">
        <ul>
            <li><a href="index.html">HOME</a>
            </li>
            <li><a href="About.html">ABOUT ME</a>
            </li>
            <li><a href: "books.html"="">BOOKS</a>
            </li>
            <li>BLOG</li>
            <li>MEDIA KIT</li>
            <li>SPEAKER</li>
            <li><a href="Calendar.html" calendar<="" a=""></a>
            </li><a href="Calendar.html" calendar<="" a="">
        <li>CONTACT</li></a>
        </ul><a href="Calendar.html" calendar<="" a="">
        </a>
    </div>
    <div class="intro">
        <p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
        </p>
    </div>
    <br>
    <center>
        <iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&amp;ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe>
    </center>
</div>

这就是你应该如何修改它（<div class="intro">之后添加<iframe>和<div class="fluid navbar">）：

<div class="fluid navbar">
    <img src="images/BlueNavBar.png" alt="navigation menu">
    <div id="menu">
        <ul>
            <li><a href="index.html">HOME</a>
            </li>
            <li><a href="About.html">ABOUT ME</a>
            </li>
            <li><a href: "books.html"="">BOOKS</a>
            </li>
            <li>BLOG</li>
            <li>MEDIA KIT</li>
            <li>SPEAKER</li>
            <li><a href="Calendar.html" calendar<="" a=""></a>
            </li><a href="Calendar.html" calendar<="" a="">
        <li>CONTACT</li></a>
        </ul><a href="Calendar.html" calendar<="" a="">
        </a>
    </div>
</div>
<div class="intro">
    <p><b>Below is a monthly calendar of the events I will be attending, participating in or speaking. <br>I may also post my blog schedule, contests and other giveaways.</b>
    </p>
</div>
<br/>
<center><iframe src="https://www.google.com/calendar/embed?src=sffk4qmbgj5b1e08d7lkg84rr0%40group.calendar.google.com&amp;ctz=America/New_York" style="border: 0" width="800" height="600" frameborder="0" scrolling="no"></iframe></center>

Answer 4

在Calendar.html的标题部分添加这两个样式（此代码编写为内部css，因为此代码不会影响其他页面）

#menu {position: absolute; } .navbar {position: static;}

CSS溢出：滚动到错误的地方？

4 个答案: