我是 css 和 html 的新手，我想创建一个包含三个主要 div 的页面。一个在左边，一个在右边，一个在中间是主要内容。
问题是我能够生成这样的 View ，但是当我取消隐藏主要内容 div 中的某些 div 按钮时，单击中心 div 在高度上拉伸(stretch)，但左边和右边的没有。
代码:
@{Layout = null;}
@model WebRole1.Models.RightsModel
@{ViewBag.Title = "EditRights";}
<html style="background-color:#FFFFFF">
<head>
<meta charset="utf-8" />
<script>
function myfunc() {
document.getElementById('mydiv2').style.display = "block";
document.getElementById('CustomRights').style.display = "block";
}
function hideview() {
document.getElementById('mydiv2').style.display = "none";
document.getElementById('CustomRights').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>
</head>
<div style="height: 100%; width: 10%; background-color: #519bbd; float: left; min-height:450px;overflow:auto">
</div>
<div id="mydiv" style="height: 100%; width: 10%; background-color: #519bbd; float: right; ">
</div>
<body>
<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;padding-left:15em;" 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.custom, "1", new { onclick = "hideview()", style = "width:10px;display:initial" })
VIEWER
</div>
<br />
<div class="editor-field">
@Html.RadioButtonFor(model => model.custom, "2", new { onclick = "hideview()", style = "width:10px;display:initial" })
REVIEWER
</div>
<br />
<div class="editor-field">
@Html.RadioButtonFor(model => model.custom, "3", new { onclick = "hideview()", style = "width:10px;display:initial" })
COAUTHOR
</div>
<br />
<div class="editor-field">
@Html.RadioButtonFor(model => model.custom, "4", new { onclick = "hideview()", style = "width:10px;display:initial" })
COOWNER
</div>
<br />
<div class="editor-field">
@Html.RadioButtonFor(model => model.custom, "0", new { onclick = "myfunc();", style = "width:10px;display:initial" })
CUSTOM
</div>
<br />
<div id="CustomRights" 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>
</div>
<div id="mydiv2" style="font-size: 16.7px; font-weight: 600; color: #757580; display: none; border: thin; border-color: #757580">
<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.isSave, new { @onclick = "checkview(this);", @class = "checkbox" }) Save File
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isEdit, new { @onclick = "checkview(this);", @class = "checkbox" }) Edit Content
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isCopy, new { @onclick = "checkview(this);", @class = "checkbox" }) Copy and Extract Content
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isViewAssigned, new { @onclick = "checkview(this);", @class = "checkbox" }) View Assigned Rights
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isChange, new { @onclick = "checkview(this);", @class = "checkbox" }) Change Rights
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isMacros, new { @onclick = "checkview(this);", @class = "checkbox" }) Allow Macros
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isExport, new { @onclick = "checkview(this);", @class = "checkbox" }) Export Content(SaveAs)
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isPrint, new { @onclick = "checkview(this);", @class = "checkbox" }) Print
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isForward, new { @onclick = "checkview(this);", @class = "checkbox" }) Foward
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isReply, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isReplyAll, new { @onclick = "checkview(this);", @class = "checkbox" }) Reply All
<br />
<br />
@Html.CheckBoxFor(modelItem => modelItem.isFullControl, new { @onclick = "checkAll(this);" }) Full Control
</div>
<p>
<input type="submit" value="Save" />
</p>
</fieldset>
}
</div>
</body>
</html>
最佳答案
html,body { height: 100%; width:100%; margin: 0px; padding: 0px; }
.left_col, .right_col{ height:100%;}
关于javascript - 隐藏div的三列布局，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25843421/