Css 页面滚动时的Div高度
我是css新手。我有一个div，我把它的高度设置为100%。但是当页面上的列表超过页面大小时，div在滚动页面时不可见，我该怎么做？ 这是我的密码：Css 页面滚动时的Div高度,css,asp.net-mvc,Css,Asp.net Mvc,我是css新手。我有一个div，我把它的高度设置为100%。但是当页面上的列表超过页面大小时，div在滚动页面时不可见，我该怎么做？ 这是我的密码： @{Layout = null;} @model WebRole1.Models.RightsModel @{ ViewBag.Title = "AddRights"; } <html style="background-color:#FFFFFF"> <head> <meta charset="utf-8
@{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>
你在找这样的东西吗 HTML
那么，当div溢出或页面正文溢出高度时，您会期待什么呢？@EhsanSajjad我已经添加了我问题的屏幕截图，请参考editonly屏幕截图，这还不够提供html和css或fiddledemo@EhsanSajjad我已经在编辑中添加了我的代码，请查看编辑后的问题，您的解决方案对我的情况没有帮助
<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>
<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>
.wrapper{
height:300px;
overflow:scroll;
}