如何使元素在浏览器大小调整时不移动？

-1

我在网站上工作，顶部有固定链接，底部有固定提交按钮。中间的内容可以使用overflow:auto进行滚动;如何使元素在浏览器大小调整时不移动？

当我缩小浏览器窗口大小我注意到2个probelms的高度：

滚轮高度犯规与浏览器的高度变化。
当高度降低的滚动条上方的固定按钮显示

我怎样才能使按钮总是停留在一个固定的位置，并自动调节溢出高度的浏览器高度的变化是什么时候？

我做了我的问题的一个示范的jsfiddle这里 - > MY JSFIDDLeDEMO

我的工作火狐19.0和Chrome版本26.0.1410.12和IE9

这是我在的jsfiddle代码：

<!DOCTYPE HTML> 
<html> 

    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>overflow based Layout</title> 
     <style type="text/css"> 
      <!-- 
      /* Pretty Stuff */ 
      /* Zero down margin and paddin on all elements */ 
      * { 
       margin: 0; 
       padding: 0; 
      } 
      body { 
       font: 92.5%/1.6"Lucida Grande", "Lucida Sans", "Lucida Sans Unicode", Verdana, sans-serif; 
      } 
      h1 { 
       font-size: 2.4em; 
       font-weight: normal; 
      } 
      h2 { 
       font-size: 2.0em; 
       font-weight: normal; 
      } 
      p, li { 
       font-size: 1.4em; 
      } 
      h1, h2, p { 
       margin: 1em 0; 
      } 
      #branding h1 { 
       margin: 0; 
      } 
      #wrapper { 
       background-color: #fff; 
      } 
      #branding { 
       height: 50px; 
       background-color:#b0b0b0; 
       padding: 20px; 
      } 
      #form-b { 
       height: 500px; 
       overflow: auto; 
       position: fixed; 
       top: 164px; 
       width: 98%; 
      } 
      #mainNav { 
       list-style: none; 
       background-color:#eee; 
      } 
      #footer { 
       background-color:#b0b0b0; 
       padding: 1px 20px; 
      } 
      /* The Core Technique 
================================= */ 
      body { 
       text-align: center; 
       min-width: 1260px; 
      } 
      #wrapper { 
       width: 100%; 
       margin: 0 auto; 
       text-align: left; 
      } 
      #content { 
       width: 100%; 
       float: right; 
      } 
      #mainNav li { 
       /* width: 180px; 
    float: left; */ 
       display:inline; 
      } 
      #submit-b { 
       border: 0px solid red; 
       bottom: 77px; 
       position: fixed; 
       text-align: cemter; 
       width: 100%; 
      } 
      #footer { 
       clear: both; 
      } 
      /* Add some padding 
================================== */ 
      #mainNav { 
       padding-top: 20px; 
       padding-bottom: 20px; 
       position: fixed; 
       width: 100%; 
      } 
      #mainNav * { 
       padding-left: 20px; 
       padding-right: 20px; 
      } 
      #mainNav * * { 
       padding-left: 0; 
       padding-right: 0; 
      } 
      #content * { 
       padding-right: 20px; 
      } 
      #content * * { 
       padding-right: 0; 
      } 
      --> 
      /* fieldset styling */ 
      fieldset { 
       margin: 1em 0; 
       /* space out the fieldsets a little*/ 
       padding: 1em; 
       border : 1px solid #ccc; 
       background-color:#F5F5F5 
      } 
      /* legend styling */ 
      legend { 
       font-weight: bold; 
      } 
      form p { 
       position: relative; 
       width: 100%; 
      } 
      /* style for labels */ 
      label { 
       float: left; 
       width: 10em; 
      } 
      #remember-me label { 
       width: 4em; 
      } 
      /* style for required labels */ 
      label .required { 
       font-size: 0.83em; 
       color:#760000; 
      } 
      /* style error messages */ 
      label .feedback { 
       position: absolute; 
       margin-left: 11em; 
       left: 200px; 
       right: 0; 
       font-weight: bold; 
       color:#760000; 
       padding-left: 18px; 
       background: url(images/error.png) no-repeat left top; 
      } 
      /* :KLUDGE: Explicitly set the width for IE6- */ 
      * html .feedback { 
       width: 10em; 
      } 
      input { 
       width: 200px; 
      } 
      input[type="text"], textarea { 
       border-top: 2px solid #999; 
       border-left: 2px solid #999; 
       border-bottom: 1px solid #ccc; 
       border-right: 1px solid #ccc; 
      } 
      input.radio, input.checkbox, input.submit { 
       width: auto; 
      } 
      /* style form elements on focus */ 
      input:focus, textarea:focus { 
       background: #ffc; 
      } 
      input.radio { 
       float: left; 
       margin-right: 1em; 
      } 
      textarea { 
       width: 300px; 
       height: 100px; 
      } 
      /* Date of Birth form styling */ 
      #monthOfBirthLabel, #yearOfBirthLabel { 
       text-indent: -1000em; 
       width: 0; 
      } 
      #dateOfBirth { 
       width: 3em; 
       margin-right: 0.5em; 
      } 
      #monthOfBirth { 
       width: 10em; 
       margin-right: 0.5em; 
      } 
      #yearOfBirth { 
       width: 5em; 
      } 
      /* Color form styling */ 
      #favoriteColor { 
       margin: 0; 
       padding: 0; 
       border: none; 
       background: transparent; 
      } 
      #favoriteColor h2 { 
       width: 10em; 
       float: left; 
       font-size: 1em; 
       font-weight: normal; 
      } 
      #favoriteColor div { 
       width: 8em; 
       float: left; 
      } 
      #favoriteColor label { 
       /*width: 3em;*/ 
       float: none; 
       display: inline; 
      } 
     </style> 
    </head> 

    <body> 
     <div id="wrapper"> 
      <div id="branding"> 

<h1>Branding</h1> 

      </div> 
      <div id="content"> 
       <ul id="mainNav"> 
        <li class="first"> 
         <a href="#">Home</a> 
        </li> 
        <li> 
         <a href="#">About</a> 
        </li> 
        <li> 
         <a href="#">News</a> 
        </li> 
        <li> 
         <a href="#">Products</a> 
        </li> 
        <li> 
         <a href="#">Services</a> 
        </li> 
        <li> 
         <a href="#">Clients</a> 
        </li> 
        <li> 
         <a href="#">Case Studies</a> 
        </li> 
       </ul> 
       <div id="form-b"> 
        <form id="comments_form" action="#" method="post"> 
         <fieldset> 
          <legend>Your Contact Details</legend> 
          <p> 
           <label for="author">Name: <span class="required">(Required)</span> 
           </label> 
           <input name="author" id="author" type="text" /> 
          </p> 
          <p> 
           <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span> 
           </label> 
           <input name="email" id="email" type="text" /> 
          </p> 
          <p> 
           <label for="url">Web Address:</label> 
           <input name="url" id="url" type="text" /> 
          </p> 
         </fieldset> 
         <fieldset> 
          <legend>Your Contact Details</legend> 
          <p> 
           <label for="author">Name: <span class="required">(Required)</span> 
           </label> 
           <input name="author" id="author" type="text" /> 
          </p> 
          <p> 
           <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span> 
           </label> 
           <input name="email" id="email" type="text" /> 
          </p> 
          <p> 
           <label for="url">Web Address:</label> 
           <input name="url" id="url" type="text" /> 
          </p> 
         </fieldset> 
         <fieldset> 
          <legend>Your Contact Details</legend> 
          <p> 
           <label for="author">Name: <span class="required">(Required)</span> 
           </label> 
           <input name="author" id="author" type="text" /> 
          </p> 
          <p> 
           <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span> 
           </label> 
           <input name="email" id="email" type="text" /> 
          </p> 
          <p> 
           <label for="url">Web Address:</label> 
           <input name="url" id="url" type="text" /> 
          </p> 
         </fieldset> 
         <fieldset> 
          <legend>Your Contact Details</legend> 
          <p> 
           <label for="author">Name: <span class="required">(Required)</span> 
           </label> 
           <input name="author" id="author" type="text" /> 
          </p> 
          <p> 
           <label for="email">Email Address: <span class="feedback">Incorrect email address. Please try again.</span> 
           </label> 
           <input name="email" id="email" type="text" /> 
          </p> 
          <p> 
           <label for="url">Web Address:</label> 
           <input name="url" id="url" type="text" /> 
          </p> 
         </fieldset> 
         <fieldset id="submit-b"> 
          <legend></legend> 
          <p> 
           <input id="submit" class="submit" name="submit" type="submit" /> 
          </p> 
         </fieldset> 
        </form> 
       </div> 
      </div> 
      <div id="footer"> 
       <p>Footer</p> 
      </div> 
     </div> 
    </body> 
</html>

来源

2013-02-27 user244394

花费时间将代码减少为显示问题的代码。如果您不显示任何努力将其降至最低，那么您如何期望我们通读所有内容？ jsFiddle演示也是一个不错的主意，可以帮助那些试图帮助你的人。你对这个问题投入的努力越多，你就会得到更好的答案。 – kapa 2013-02-27 23:08:43

我在http://jsfiddle.net/dev1212/8yMN7/ – user244394 2013-02-27 23:19:01

1.滚动条高度不随浏览器的高度而变化。
那是因为你已经为#form-b一个固定的高度，设定为500像素：

#form-b { 
    height: 500px; 
    overflow: auto; 
    position: fixed; 
    top: 164px; 
    width: 98%; 
}

2.当高度减小的固定按钮示出了在滚动的顶部
这是不必要的用fieldset包装提交按钮。简单地将提交按钮相对于包含的父项<form>进行定位。

3.如何让按钮始终保持在固定位置，并且在浏览器高度变化时自动调整溢出高度？
固定的位置，在固定的视口，或相对于滚动div固定？此外，只要浏览器高度发生变化，就必须依靠JS重新调整表单的高度，如下所示：

$(document).ready(function() { 
    $(window).resize(function() { 
     // Set <form> height here with calculations (...) 
     $("#form-b).height(...); 
    }).resize(); // Trigger another resize when document is ready 
});

来源

2013-02-28 00:33:12 Terry

@ Terry创建了一个JSfiddle演示，谢谢我将固定高度更改为百分比，并将＃submit-b位置更改为绝对值。但提交按钮不再固定在底部。我希望它始终处于最底层，不会与表单重叠。当浏览器大小增加或减少时，我希望它永远在1px之外，并始终在底部 – user244394 2013-02-28 15:17:01

@ user244394而不是使用'top'，而是使用'bottom'。 – Terry 2013-02-28 16:16:01

我试过ddint似乎工作。你可以看看这里的例子：http://jsfiddle.net/dev1212/8yMN7/8/ – user244394 2013-02-28 18:26:10

如何使元素在浏览器大小调整时不移动？

回答

相关问题