具有隱藏div的三列布局
[英]three column layout with hidden divs
問題描述
我是CSS和html的新手，我想創建一個包含三個主要div的頁面。 左一，右一，主要內容在中間。
問題是我能夠生成這樣的視圖，但是當我在按鈕上的主內容div取消隱藏某個div ，單擊中心div在高度上拉伸，而左右的div則不會。 碼：
@{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>
2 個解決方案
解決方案1
0 2014-09-15 08:14:28
html,body { height: 100%; width:100%; margin: 0px; padding: 0px; }
.left_col, .right_col{ height:100%;}
解決方案2
0 2014-09-15 08:17:04
您可以閱讀有關如何獲得像表那樣的股息的文章
這三個按鈕和左下角的（.link divs）一直隱藏，直到我“檢查元素”（在Chrome中），然后它們立即出現。 為什么？
[英]The three buttons and the bottom left (the .link divs) are hidden until i “inspect element” (in Chrome), and then they instantly appear. Why?
如何定制三欄式屏幕閱讀器的閱讀順序？
[英]How to customize the reading order by screen readers of a three-column layout?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.