0

我正在创建一个页面,该页面顶部有固定链接,底部有固定提交按钮。overflow:auto中间的内容可以使用;滚动。

我注意到,当我减小浏览器窗口大小时,滚动条会慢慢消失。

我怎样才能解决这个问题?有什么黑客吗?

我正在使用 Firefox 19.0 和 chrome 版本 26.0.1410.12 和 IE9

这是我的全部代码:

<!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>
4

1 回答 1

0

将内边距减小到 10px:

#content * {
    padding-right: 10px; /* Line 106 */
} 
于 2013-02-27T22:52:33.060 回答