Question

在这里发帖，如果我做错了，请原谅我。

我已经复制了导航栏的教程并复制了代码并修改了它以使其成为我自己的工作。无论如何，我自己唯一的代码就是我想要在页面底部的Footer div，但无论我设置宽度，它似乎都比我想要的宽。窗口中会出现一个滚动条，必须使用它来查看页面的其余部分。

我尝试过使用宽度：100％和宽度：自动，但似乎无法正确使用。

提前致谢

＆＃13;

$(function() {
  /**
   * for each menu element, on mouseenter, 
   * we enlarge the image, and show both sdt_active span and 
   * sdt_wrap span. If the element has a sub menu (sdt_box),
   * then we slide it - if the element is the last one in the menu
   * we slide it to the left, otherwise to the right
   */
  $('#sdt_menu > li').bind('mouseenter', function() {
    var $elem = $(this);
    $elem.find('img')
      .stop(true)
      .animate({
        'width': '170px',
        'height': '170px',
        'left': '0px'
      }, 400, 'easeOutBack')
      .andSelf()
      .find('.sdt_wrap')
      .stop(true)
      .animate({
        'top': '140px'
      }, 500, 'easeOutBack')
      .andSelf()
      .find('.sdt_active')
      .stop(true)
      .animate({
        'height': '170px'
      }, 300, function() {
        var $sub_menu = $elem.find('.sdt_box');
        if ($sub_menu.length) {
          var left = '170px';
          if ($elem.parent().children().length == $elem.index() + 1)
            left = '-170px';
          $sub_menu.show().animate({
            'left': left
          }, 200);
        }
      });
  }).bind('mouseleave', function() {
    var $elem = $(this);
    var $sub_menu = $elem.find('.sdt_box');
    if ($sub_menu.length)
      $sub_menu.hide().css('left', '0px');

    $elem.find('.sdt_active')
      .stop(true)
      .animate({
        'height': '0px'
      }, 300)
      .andSelf().find('img')
      .stop(true)
      .animate({
        'width': '0px',
        'height': '0px',
        'left': '85px'
      }, 400)
      .andSelf()
      .find('.sdt_wrap')
      .stop(true)
      .animate({
        'top': '25px'
      }, 500);
  });
});

＆＃13;

body {
  background: #333 url(bg.jpg) repeat top left;
  font-family: Arial;
}

ul.sdt_menu {
  margin-top: 150px;
}

h1.title {
  text-indent: -9000px;
  background: transparent url(title.png) no-repeat top left;
  width: 633px;
  height: 69px;
}

ul.sdt_menu {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: "Myriad Pro", "Trebuchet MS", sans-serif;
  font-size: 14px;
  width: 1020px;
}

ul.sdt_menu a {
  text-decoration: none;
  outline: none;
}

ul.sdt_menu li {
  float: left;
  width: 170px;
  height: 85px;
  position: relative;
  cursor: pointer;
}

ul.sdt_menu li>a {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 170px;
  height: 85px;
  z-index: 12;
  background: transparent url(../images/overlay.png) no-repeat bottom right;
  -moz-box-shadow: 0px 0px 2px #000 inset;
  -webkit-box-shadow: 0px 0px 2px #000 inset;
  box-shadow: 0px 0px 2px #000 inset;
}

ul.sdt_menu li a img {
  border: none;
  position: absolute;
  width: 0px;
  height: 0px;
  bottom: 0px;
  left: 85px;
  z-index: 100;
  -moz-box-shadow: 0px 0px 4px #000;
  -webkit-box-shadow: 0px 0px 4px #000;
  box-shadow: 0px 0px 4px #000;
}

ul.sdt_menu li span.sdt_wrap {
  position: absolute;
  top: 25px;
  left: 0px;
  width: 170px;
  height: 60px;
  z-index: 15;
}

ul.sdt_menu li span.sdt_active {
  position: absolute;
  background: #111;
  top: 85px;
  width: 170px;
  height: 0px;
  left: 0px;
  z-index: 14;
  -moz-box-shadow: 0px 0px 4px #000 inset;
  -webkit-box-shadow: 0px 0px 4px #000 inset;
  box-shadow: 0px 0px 4px #000 inset;
}

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a {
  margin-left: 15px;
  text-transform: uppercase;
  text-shadow: 1px 1px 1px #000;
}

ul.sdt_menu li span span.sdt_link {
  color: #fff;
  font-size: 24px;
  float: left;
  clear: both;
}

ul.sdt_menu li span span.sdt_descr {
  color: #0B75AF;
  float: left;
  clear: both;
  width: 155px;
  /*For dumbass IE7*/
  font-size: 10px;
  letter-spacing: 1px;
}

ul.sdt_menu li div.sdt_box {
  display: block;
  position: absolute;
  width: 170px;
  overflow: hidden;
  height: 170px;
  top: 85px;
  left: 0px;
  display: none;
  background: #000;
}

ul.sdt_menu li div.sdt_box a {
  float: left;
  clear: both;
  line-height: 30px;
  color: #0B75AF;
}

ul.sdt_menu li div.sdt_box a:first-child {
  margin-top: 15px;
}

ul.sdt_menu li div.sdt_box a:hover {
  color: #fff;
}

.footer {
  background-color: pink;
  height: 140px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
}

.main_content {
  background-color: orange;
  float: left;
  clear: both;
}

.content {
  background-color: red;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <h1 class="title">Slide Down Box Menu with jQuery and CSS3</h1>
  <ul id="sdt_menu" class="sdt_menu">
    <li>
      <a href="#">
        <img src="images/2.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">About me</span>
        <span class="sdt_descr">Get to know me</span>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/1.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">Portfolio</span>
        <span class="sdt_descr">My work</span>
        </span>
      </a>
      <div class="sdt_box">
        <a href="#">Websites</a>
        <a href="#">Illustrations</a>
        <a href="#">Photography</a>
      </div>
    </li>
    <li>
      <a href="#">
        <img src="images/3.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">Inspiration</span>
        <span class="sdt_descr">Where ideas get born</span>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/4.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">Photos</span>
        <span class="sdt_descr">I like to photograph</span>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/5.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">Blog</span>
        <span class="sdt_descr">I write about design</span>
        </span>
      </a>
    </li>
    <li>
      <a href="#">
        <img src="images/6.jpg" alt="" />
        <span class="sdt_active"></span>
        <span class="sdt_wrap">
				<span class="sdt_link">Projects</span>
        <span class="sdt_descr">I like to code</span>
        </span>
      </a>
      <div class="sdt_box">
        <a href="#">Job Board Website</a>
        <a href="#">Shopping Cart</a>
        <a href="#">Interactive Maps</a>
      </div>
    </li>
  </ul>
</div>


<div class="main_content">
  fffs
</div>
<div class="footer">
  home
</div>

＆＃13;

Answer 1

(gdb) backtrace
#0  __GI___libc_free (mem=0x55) at malloc.c:2951
#1  0x00000000006916d4 in X509_VERIFY_PARAM_free ()
#2  0x00007fffca7e1ee9 in SSL_free ()
   from /lib/x86_64-linux-gnu/libssl.so.1.0.0
#3  0x00007ffff6e7fd54 in ?? ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#4  0x00007ffff6e81627 in ?? ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#5  0x00007ffff6e7889c in ?? ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#6  0x00007ffff6e7381d in QSslConfiguration::defaultConfiguration() ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#7  0x00007ffff6e09e53 in QNetworkRequest::sslConfiguration() const ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#8  0x00007ffff6df2143 in QNetworkAccessManager::createRequest(QNetworkAccessManager::Operation, QNetworkRequest const&, QIODevice*) ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4
#9  0x00007ffff6deefc4 in QNetworkAccessManager::get(QNetworkRequest const&) ()
   from /usr/lib/x86_64-linux-gnu/libQtNetwork.so.4

Answer 2

只要看一下这个片段，我的猜测就是你正在从身体上拾取边距/填充物。我没有移动片段进行测试，但我认为您需要做的就是将页脚div设置为0。

.footer {
  background-color: pink;
  height: 140px;
  width: 100%;
  position: absolute;
  bottom: 0;
  overflow: hidden;
  left: 0;
}

如何阻止我的页脚div超过页面的宽度？

2 个答案: