Question

我有一个问题，我不知道如何解决，我希望这里的一些聪明人会有答案。我有一个“联系表单”，它由jquery幻灯片效果控制，只有当用户将鼠标悬停在图标上时才会显示。对于包含表单的div的整个宽度，该效果使表单滑入和滑出浏览器的右边框。默认情况下，表单是隐藏的。到目前为止，我已经修复了div，一切都工作正常，但我意识到它跟随页面向下滚动，我不想要。然后我将div保持为绝对值，这使得它保持在原位，但是因为我隐藏了右边距为-250的div，它将页面向右推到那么多，在底部添加了一个滚动条。处理。

关于如何防止div滑落的任何想法，但同时停止从溢出到右边？我想我可能需要另一个脚本来阻止固定的div滑落，但这只是一个想法。非常感谢任何帮助。

Answer 1

给表格一个权利：0; 这将始终保持表格与右边缘对齐而不会溢出..

<div id="container">
   <div id="trigger">Show Form</div>
   <div id="form">
        Form Contents go here
   </div>

#container{
   position: relative;
}
#form{
  display:none;
  position: absolute;
  right: 0;
  top:0;
  width: 250px; 
  height: 100px; /* for demo */
  background: #999; /* for demo */
}
#form.visible{
   display: block;
}

$(document).ready( function() {
  $("#trigger").click(function() {
     $("#form").addClass("visible");
  });
});

http://jsfiddle.net/medmu/2/

溢出div的问题

1 个答案: