html - 页面不滚动

标签 html css

我是一个完全的 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"/>              
}

编辑

根据请求，这是 fiddle :http://jsfiddle.net/33Wex/

最佳答案

尝试将您的容器 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;
}

关于html - 页面不滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24396828/

上一篇：css - 使用 CSS 控制 SVG 图像在网页上的位置

下一篇：css - Dojo Dgrid - 使用 block 中的剩余空间

相关文章：

javascript - context.drawImage 是如何工作的

javascript - MooTools 事件未触发

html - 当我使用最大宽度或宽度 : auto 时，横幅中的图像消失

css - 如何将 DIV2 带到顶级 WRT DIV1？

javascript - 如何优化 JS canvas 绘图？

javascript - token '==' 是意外的 ngClass

javascript - 如何在javascript中下载具有自定义名称的mp3文件

javascript - 使用选择模块更改特定行的颜色

html - CSS grid + srcset + sizes 适用于多种宽度和屏幕分辨率？

html - 为什么边框半径只在 1 个 Angular 起作用？

©2024 IT工具网  联系我们