Question

我刚接触css。我有div，我设置的高度等于100％。但是当页面上的列表超出页面大小时，在滚动页面时看不到div，我该怎么做？这是我的代码：

@{Layout = null;}
@model WebRole1.Models.RightsModel

@{
 ViewBag.Title = "AddRights";
 }

  <html style="background-color:#FFFFFF">
<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/Site1.css")


<script>
    function myfunc() {

        document.getElementById('mydiv2').style.display = "block";
    }
    function hideview() {

        document.getElementById('mydiv2').style.display = "none";
    }
    function checkview(myID) {
        if (myID.checked == true) {
            view.checked = true;
        }

    }
    function checkAll(myID) {
        if (myID.checked == true) {
            var list = document.getElementsByClassName('checkbox');
            for (i = 0; i < list.length; i++) {
                list[i].checked = true;
                //document.getElementsByClassName('CheckBoxFor')[i].checked = true;
            }
        } else {
            var list = document.getElementsByClassName('checkbox');
            for (i = 0; i < list.length; i++) {
                list[i].checked = true;
            }
        }
    }

</script>

<header>

    <div class="title">
        <p class="site-title">@Html.ActionLink("Microsoft Rights Management", "Index", "Home")</p>
    </div>
</header>


<div style="width:100%;padding-left:3em">


    <h2 class="main-content" style="color:#757580">
       Assign rights to the User
    </h2>
</div>
<div style="background-color:#ffffff;float:left;padding-left:2em;" class="ui-tabs-nav">

    @using (Html.BeginForm("SaveTemplate","Temp"))
    {

        @Html.ValidationSummary(true)
        <br />
<fieldset style="font-size:16.7px;font-weight:600;color:#757580">
    <legend>TemplateModel</legend>
    <div>
        @Html.RadioButtonFor(model => model.isCustom, "1", new {onclick="hideview()", style = "width:10px;display:initial" })
        VIEWER
    </div>
    <br />
    <div class="editor-field">
        @Html.RadioButtonFor(model => model.isCustom, "2", new {onclick="hideview()", style = "width:10px;display:initial" })
        REVIEWER
    </div>
    <br />
    <div class="editor-field">
        @Html.RadioButtonFor(model => model.isCustom, "3", new { onclick = "hideview()", style = "width:10px;display:initial" })
        COAUTHOR
    </div>
    <br />
    <div class="editor-field">
        @Html.RadioButtonFor(model => model.isCustom, "4", new { id="view",onclick="hideview()",style = "width:10px;display:initial" })
        COOWNER
    </div>
    <br />
    <div class="editor-field">
        @Html.RadioButtonFor(model => model.isCustom, "0", new { onclick="myfunc();",style = "width:10px;display:initial" })
        CUSTOM
    </div>
    <br />
    <div id="mydiv2" style="font-size: 16.7px; font-weight: 600; color: #757580;display:none;">
        <h1 style= "font-size:16.7px;font-weight:600;color:#757580">
            Custom Rights

        </h1>
        <br />
        @*@Html.CheckBoxFor(modelItem => modelItem.viewer,new { @onclick = "checkview();" })*@ 
        <input  data-val="true" data-val-required="The viewer field is required." id="view" name="view" value="true" type="checkbox" class="checkbox" >  View Content

        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.save, new { @onclick = "checkview(this);" ,@class="checkbox"}) Save File
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.edit, new { @onclick = "checkview(this);",@class="checkbox" }) Edit Content
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.copy, new { @onclick = "checkview(this);", @class = "checkbox" }) Copy and Extract Content
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.viewAssigned, new { @onclick = "checkview(this);", @class = "checkbox" }) View Assigned Rights
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.change, new { @onclick = "checkview(this);", @class = "checkbox" }) Change Rights
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.macros, new { @onclick = "checkview(this);", @class = "checkbox" }) Allow Macros
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.export, new { @onclick = "checkview(this);",@class="checkbox" }) Export Content(SaveAs)
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.print, new { @onclick = "checkview(this);" ,@class="checkbox"}) Print
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.forward, new { @onclick = "checkview(this);",@class="checkbox" }) Foward
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.reply, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.replyall, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply All
        <br />
        <br />
        @Html.CheckBoxFor(modelItem => modelItem.fullcontrol, new { @onclick = "checkAll(this);"}) Full Control

    </div>

    <p>
        <input type="submit" value="Save" />
    </p>

</fieldset>
    }



</div>

我尝试了将底部设置为0px但没有工作的事情。这是滚动中发生的事情的图像我希望这个蓝色div即使在我滚动

时也可见

enter image description here

Answer 1

您是否正在寻找类似DEMO

的内容

HTML

<div class="wrapper">
<div style="height: 100%; width: 10%; background-color: #6495ED; float: left; word-wrap:break-word;    overflow:auto;">
 cdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcdssdfvsfvsgvvfvfdrgdgdgdgdgdgvdcThis is a test for Div height upon page scroll
</div>
</div>

CSS

.wrapper{
height:300px;
overflow:scroll;
}

页面滚动的Div高度

1 个答案: