Question

我是一个完整的css菜鸟，不知道发生了什么。我正在创建的页面上的表单在屏幕底部被切断，但是用户无法向下滚动以查看其余内容。

Layout.cshtml

<html>
    <head>
        <meta charset="utf-8" />
        <title>@ViewBag.Title - My ASP.NET MVC Application</title>
        <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <meta name="viewport" content="width=device-width" />
        @Styles.Render("~/Content/css")
        @Scripts.Render("~/bundles/modernizr")
        @Scripts.Render("~/bundles/jquery")
    </head>
    <body>
        <div id="content">
            <div id="nav-wrapper">
                <nav>
                    <ul>
                        <li><a href="#" id="search">Search</a></li>
                        <li><a href="#" id="createCode">Create PENSGC</a></li>
                        <li><a href="#" id="displayX">Display Exceptions</a></li>
                        <li><a href="#" id="createX">Create Exception</a></li>
                    </ul>
                </nav>
            </div>
            <div id="render-body">
                @RenderBody()                  
            </div>
        </div> 
    </body>
</html>

CSS

html {
    background-image: url("/Images/Swiftnet-Background.jpg");
    margin: 0;
    padding: 0;
}

body {
    margin: 0 auto;
    height: 100%;
    width: 100%;
}

#render-body {
    height: auto;
}

#content {
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -300px;
    margin-left: -400px;
    height: auto;
    background-color: white; 
    border: 1px solid #999;
    border-radius: 5px 10px / 10px;
    -webkit-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    -moz-box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
    box-shadow: -3px 10px 62px -18px rgba(10,9,10,0.75);
}

/*#body {
    clear: both;
    padding-bottom: 35px;
}*/

a:link, a:visited,
a:active, a:hover {
    color: #333;
}

a:hover {
    background-color: #c7d1d6;
}

header, footer, hgroup, section {
    display: block;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.clear-fix:after {
    content: ".";
    clear: both;
    display: block;
    height: 0;
    visibility: hidden;
}

h1, h2, h3,
h4, h5, h6 {
    color: #000;
    margin-bottom: 0;
    padding-bottom: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.75em;
}

h3 {
    font-size: 1.2em;
}

h4 {
    font-size: 1.1em;
}

h5, h6 {
    font-size: 1em;
}

h5 a:link, h5 a:visited, h5 a:active {
    padding: 0;
    text-decoration: none;
}

/* menu */
nav {
    margin-bottom: 50px;
    text-align: center;
}

/*remove indent*/
ul {
    margin-left: -25px;
}
ul li {
    display: inline;
    padding-right: 40px;
    padding-left: 40px;
}



/* forms */
.display-label, 
.editor-label {
    margin: 1em 0 0 0;
}

.editor-box-label 
{
    padding-top: 8px;
    padding-bottom: 5px;
    font-weight: bold;
    color: #696969;
}

.display-field, 
.editor-field {
    margin: 0.5em 0 0 0;
    color: Black;
}

fieldset {
    border: 2px;
    margin: 0;
    padding: 0;
}

fieldset legend {
    text-align: center;
}

fieldset ol {
    padding: 0;
    list-style: none;
}

fieldset ol li {
    padding-bottom: 5px;
}

label {
    display: block;
    font-size: 1.2em;
    font-weight: 600;
}

label.checkbox {
    display: inline;
}

input, textarea {
    border: 1px solid #e2e2e2;
    background: #fff;
    color: #333;
    font-size: 1.2em;
    margin: 5px 0 6px 0;
    padding: 5px;
    width: 300px;
}

textarea {
    font-family: inherit;
    width: 500px;
}

    input:focus, textarea:focus {
        border: 1px solid #7ac0da;
    }

    input[type="checkbox"] {
        background: transparent;
        border: inherit;
        width: auto;
    }

    input[type="submit"],
    input[type="button"],
    button {
        background-color: #d3dce0;
        border: 1px solid #787878;
        cursor: pointer;
        font-size: 1.2em;
        font-weight: 600;
        padding: 7px;
        margin-right: 8px;
        width: auto;
    }

    td input[type="submit"],
    td input[type="button"],
    td button {
        font-size: 1em;
        padding: 4px;
        margin-right: 4px;
    }

/* info and errors */
.message-info {
    border: 1px solid;
    clear: both;
    padding: 10px 20px;
}

.message-error {
    clear: both;
    color: #e80c4d;
    font-size: 1.1em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.message-success {
    color: #7ac0da;
    font-size: 1.3em;
    font-weight: bold;
    margin: 20px 0 10px 0;
}

.error {
    color: #e80c4d;
}

/* styles for validation helpers */
.field-validation-error {
    color: #e80c4d;
    font-weight: bold;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #e80c4d;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #e80c4d;
    font-weight: bold;
    font-size: 1.1em;
}

.validation-summary-valid {
    display: none;
}

/* tables
----------------------------------------------------------*/
table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-top: 0.75em;
    border: 0 none;
}

th {
    font-size: 1.2em;
    text-align: left;
    border: none 0px;
    padding-left: 0;
}

    th a {
        display: block;
        position: relative;
    }

    th a:link, th a:visited, th a:active, th a:hover {
        color: #333;
        font-weight: 600;
        text-decoration: none;
        padding: 0;
    }

    th a:hover {
        color: #000;
    }

    th.asc a, th.desc a {
        margin-right: .75em;
    }

    th.asc a:after, th.desc a:after {
        display: block;
        position: absolute;
        right: 0em;
        top: 0;
        font-size: 0.75em;
    }

    th.asc a:after {
        content: '▲';
    }

    th.desc a:after {
        content: '▼';
    }

td {
    padding: 0.25em 2em 0.25em 0em;
    border: 0 none;
}

tr.pager td {
    padding: 0 0.25em 0 0;
}

/* footer
----------------------------------------------------------*/
footer .float-left,
footer .float-right {
    float: none;
}

footer {
    text-align: center;
    height: auto;
    padding: 10px 0;
}

    footer p {
        margin: 0;
    }

.form-container {
   clear: both;
   overflow: auto;
}

.form-panel-inner {
   width:auto;
   float:left;
   padding-right: 20px;
   padding-left: 20px;
}

查看

@model PENSGC_Generator.Models.PENSGC
@{
    ViewBag.Title = "Home Page";
}
<script type="text/javascript">
    $(document).ready(function() {
        $('#search').click(function() {

        });
        $('#createCode').click(function() {

        });
        $('#displayX').click(function() {

        });
        $('#createX').click(function() {

        });
    });
</script>

@using (Html.BeginForm())
{
    <div id="BigDiv" class="form-container">          
        <div id="LeftDiv" class="form-panel-inner">

            <fieldset>
                <legend>Search Criteria</legend>
                <table id="searchTable" style="margin-bottom: 50px;">
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalStatNum)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.OriginalStatNum, new { style = "width:80px;" })
                            </div>             
                        </td>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.ReportsToStat)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.ReportsToStat, new { style = "width:80px;" })
                            </div>                
                        </td>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalMarketSegment)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.OriginalMarketSegment, new { style = "width:80px;" })
                            </div>                          
                        </td>                    
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.Pensgc)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.Pensgc, new { style = "width:80px;" })
                            </div>                         
                        </td>
                        <td colspan="2">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalName)
                            </div>
                            <div class="editor-label" style="margin-top: 5px;">
                                @Html.TextBoxFor(model => model.OriginalName, new { style = "width:160px;" })
                            </div>                       
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalEffectiveDate)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.OriginalEffectiveDate)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalCancelDate)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.OriginalCancelDate)
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.ExceptionName)
                            </div>
                            <div class="editor-field">
                                @Html.DropDownListFor(model => model.ExceptionName, Model.ExcpetionListDropDown, " ")
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.LastUpdateId)
                            </div>
                            <div>
                                @Html.TextBoxFor(model => model.LastUpdateId, new { style="width: 80px;", @readonly="readonly" })
                            </div>
                        </td>
                    </tr>
                </table>
            </fieldset>
        </div>
        <div id="RightDiv" class="form-panel-inner">
            <fieldset>
                <legend>DSS Distributor Info</legend>
                <table style="margin-bottom: 50px;">
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.AgencyName)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.AgencyName, new { @readonly="readonly"})
                            </div>                        
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.CompanyCode)
                            </div>
                            <div>
                                @Html.TextBoxFor(model => model.CompanyCode, new { style="width:80px;", @readonly="readonly"})
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.SecSellerCd)                            
                            </div>
                            <div>
                                @Html.TextBoxFor(model => model.SecSellerCd, new { style="width:80px;", @readonly="readonly"})
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.OriginalMarketSegment)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.OriginalMarketSegment, new { style="width:80px;", @readonly="readonly"})
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.LifeAnn)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.LifeAnn, new { style="width:80px;", @readonly="readonly"})
                            </div>                        
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.ConnCode)  
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.ConnCode, new { style="width:80px;", @readonly="readonly"})
                            </div>
                        </td>
                        <td>
                            <div class="editor-label">
                                @Html.LabelFor(model => model.CancelRsn, new { style="width:80px;", @readonly="readonly"})
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.CancelRsn, new { style="width:80px;", @readonly="readonly"})
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <div class="editor-label">
                                @Html.LabelFor(model => model.ReportsToAgn)
                            </div>
                            <div class="editor-field">
                                @Html.TextBoxFor(model => model.ReportsToAgn)
                            </div>
                        </td>
                    </tr>
                </table>

                @*Relationship Codes read from Dictionary object*@
                <table>
                    <thead>
                        <th>Relationship Code</th>
                        <th>Description</th>
                    </thead>
                    <tbody>
                        @foreach (var item in Model.RelCodes)
                        {
                            <tr>
                                <td>
                                    @Html.Display(item.Key) 
                                    @Html.Display("121")
                                </td>
                                <td>
                                    @Html.Display(item.Value)
                                    @Html.Display("Channel Desc")
                                </td>
                            </tr>
                        }                       
                    </tbody>

                </table>
            </fieldset>
        </div>  
    </div>
    <div style="clear: both;"></div>
    <input type="submit" value="Submit"/>              
}

修改

每个请求都是小提琴：http://jsfiddle.net/33Wex/

Answer 1

尝试将容器div更改为：

<div id="BigDiv" class="form-container">

添加此CSS：

.form-container {
   clear: both;
   overflow: auto;
}

另外，像这样优化你的CSS：

 <div id="LeftDiv" class="form-panel-inner">
 <div id="RightDiv" class="form-panel-inner">

.form-panel-inner {
   width:auto;
   float:left;
   padding-right: 20px;
   padding-left: 20px;
}

Answer 2

这将由于您修复内容以使其保持在相同位置

display: block;
position: fixed;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;

如果您试图将内容居中，我会删除这些行并替换为

margin:0px auto 0px auto; 
width:xxxpx;

将边距中的第一个0px替换为从顶部（顺时针，右上，下，左）所需的任何边距，并且还为内容提供宽度，以便auto可以计算出它需要的内容。希望有所帮助

Answer 3

我不是100％确定你的目标是什么，但我调整了你的小提琴Here

替换：

position: fixed;
top: 50%;
left: 50%;
margin-top: -300px;
margin-left: -400px;

使用：

top: 10px;
left: 10px;
position: relative;

并取得了类似的效果。

Answer 4

通过将position属性更改为absolute来解决问题。以下css值以页面中的content div元素为中心，并允许页面滚动。

#content {
    position: absolute;
    top: 70%;
    left: 50%;
    margin-top: -350px;
    margin-left: -400px;

页面不滚动

4 个答案: